Twitter Bootstrap 3 下拉菜单在与prototype.js 一起使用时消失 [英] Twitter Bootstrap 3 dropdown menu disappears when used with prototype.js

问题描述

我在使用 bootstrap 3 & 时遇到问题在 magento 网站上一起使用prototype.js.

基本上，如果您点击下拉菜单(我们的产品)&然后点击背景，下拉菜单(Our Products)消失(prototype.js在li中添加了display: none;").

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

您可以在以下链接的页面上看到下拉菜单的工作原理，而无需在页面上包含prototype.js:http://ridge.mydevelopmentserver.com/

有没有其他人遇到过这个问题或有解决冲突的可能解决方案?

简单修复:

只需用这个引导程序友好的文件替换 Magento 的prototype.js 文件:

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

您可以在这里看到在prototype.js 文件中所做的更改以修复引导问题:

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

注意:JQuery 必须在prototype.js 之前包含在您的magento 皮肤中.示例:

<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;如果(窗口.jQuery){var all = jQuery('*');jQuery.each(['hide.bs.dropdown','hide.bs.collapse','hide.bs.modal','hide.bs.tooltip','hide.bs.popover','hide.bs.tab']，函数(索引，事件名称){all.on(事件名称，函数(事件){isBootstrapEvent = true;});});}var originalHide = Element.hide;元素.addMethods({隐藏:功能(元素){如果(isBootstrapEvent){isBootstrapEvent = false;返回元素；}返回原始隐藏(元素)；}});})();

I have an issue when using bootstrap 3 & prototype.js together on a magento website.

Basically if you click on the dropdown menu (Our Products) & then click on the background, the dropdown menu (Our Products) disappears (prototype.js adds "display: none;" to the li).

Here is a demo of the issue: http://ridge.mydevelopmentserver.com/contact.html

You can see that the dropdown menu works like it should without including prototype.js on the page at the link below: http://ridge.mydevelopmentserver.com/

Has anyone else ran into this issue before or have a possible solution for the conflict?

EASY FIX:

Just replace Magento's prototype.js file with this bootstrap friendly one:

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

You can see the changes made in the prototype.js file to fix the bootstrap issue here:

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

NOTE: JQuery must be include in your magento skin before prototype.js.. Example:

<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>

解决方案

I've also used code from here: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework but without a need to modify any source. Just put code below somewhere after prototype and jquery includes:

(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);
        }
    });
})();

这篇关于Twitter Bootstrap 3 下拉菜单在与prototype.js 一起使用时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！