Magento: 解决 Bootstrap 3 与prototype并用的时候, 下拉菜单消失的问题 Bootstrap 3 dropdown menu dis...

最新推荐文章于 2025-11-28 06:24:21 发布

原创最新推荐文章于 2025-11-28 06:24:21 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍了两种解决方法，当Magento使用Prototype.js与Bootstrap 3并存时，如何避免下拉菜单消失的问题。方法一是替换友好的prototype.js文件，方法二是不修改源文件，通过额外的代码实现兼容。

方法一 : 使用友善的文件

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:

Download 下载 prototype-friendly.js

方法二 : 不修改任何源文件

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

原文: http://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js

转自: Magento: 解决 Bootstrap 3 与prototype并用的时候, 下拉菜单消失的问题 Bootstrap 3 dropdown menu disappears when used with prototype.js