当与prototype.js一起使用时,Twitter Bootstrap 3下拉菜单消失

Question

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

基本上,如果你点击下拉菜单(我们的产品),然后单击背景上,在下拉菜单中(我们的产品)消失(prototype.js中增加了"显示:无;"给力).

以下是该问题的演示:http: //ridge.mydevelopmentserver.com/contact.html

你可以看到下拉菜单的工作方式应该没有,不包括下面链接页面上的prototype.js:http: //ridge.mydevelopmentserver.com/

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

容易修复:

用这个bootstrap友好的文件替换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/079df47e7c1f536a0d9eea2993ae19768e1f0554

注意:在prototype.js之前,JQuery必须包含在你的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>

Answer 1

我也使用过这里的代码: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);
        }
    });
})();

Answer 2

晚到派对,但发现这个github问题链接到这个链接到这个jsfiddle的信息页面非常好.它没有在每个jQuery选择器上修补,而且,我认为,迄今为止最好的解决方案.在此复制代码以帮助未来的人民:

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
  var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
  var disablePrototypeJS = function (method, pluginsToDisable) {
    var handler = function (event) {
      event.target[method] = undefined;
      setTimeout(function () {
        delete event.target[method];
      }, 0);
    };
    pluginsToDisable.each(function (plugin) {
      jQuery(window).on(method + '.bs.' + plugin, handler);
    });
  };


  disablePrototypeJS('show', pluginsToDisable);
  disablePrototypeJS('hide', pluginsToDisable);
}

Answer 3

不建议在*jQuery中使用*选择器.这将获取页面上的每个DOM对象并将其放入变量中.我建议选择使用Bootstrap组件的元素.以下解决方案仅使用下拉组件:

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('.dropdown');
        jQuery.each(['hide.bs.dropdown'], 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);
        }
    });
})();

Answer 4

非常迟到了:如果你不喜欢有额外的脚本运行,你可以添加一个简单的CSS覆盖,以防止屏幕隐藏.

.dropdown {
    display: inherit !important;
}

一般使用!important的CSS建议反对,但我认为这算作在我看来,一个可接受的使用.

Answer 5

请参阅http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/。

验证单击元素的名称空间是一个非常简单的修复。

向prototype.js添加验证函数：

之后，在隐藏元素之前验证名称空间：

  hide: function(element) {
    element = $(element);
    if(!isBootstrapEvent)
    {
        element.style.display = 'none';
    }
    return element;
  },