magento – Twitter Bootstrap 3下拉菜单与prototype.js一起使用

发布时间：2020-12-18 00:00:14 所属栏目：安全来源：网络整理

导读：我有一个问题，当使用bootstrap 3 prototype.js在magento网站上。基本上如果你点击下拉菜单(我们的产品)然后点击背景，下拉菜单(我们的产品)消失(prototype.js添加“display：none;”到li)。这里是一个演示的问题： http://ridge.mydevelopmentserver.com/

我有一个问题，当使用bootstrap 3& prototype.js在magento网站上。

基本上如果你点击下拉菜单(我们的产品)&然后点击背景，下拉菜单(我们的产品)消失(prototype.js添加“display：none;”到li)。

这里是一个演示的问题：
http://ridge.mydevelopmentserver.com/contact.html

您可以看到下拉菜单的工作原理，如果不包括prototype.js页面上的链接如下：
http://ridge.mydevelopmentserver.com/

有没有人遇到这个问题之前或有可能的解决方案的冲突？

EASY FIX：

只需要替换Magento的prototype.js文件这个bootstrap友好的：

https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js

你可以看到在prototype.js文件中修改引导问题的修改：

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

注意：jQuery必须包括在你的magento皮肤前prototype.js ..例如：

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>

解决方法

我也使用了代码从这里： http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework，但不需要修改任何源。只是把代码放在原型和jquery之后的某处包括：

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('*');
        jQuery.each(['hide.bs.dropdown','hide.bs.collapse','hide.bs.modal','hide.bs.tooltip','hide.bs.popover','hide.bs.tab'],function(index,eventName) {
            all.on(eventName,function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!