点击它后为什么引导菜单消失了？

Question

我在我的网站上使用Magento和jQuery.当我点击下拉按钮时,我的bootstrap切换菜单上有一些问题,下拉列表消失了.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-car"></i> Automobiles
    <span class="caret pull-right"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <div class="col-sm-4">
      <div class="sub-cat">
        <h3>Cars <span class="pull-right"><i class="fa fa-chevron-right"></i></span></h3>
        <ul class="list-unstyled">
          <li><a href="" title="">Toyota</a></li>
          <li><a href="" title="">Suzuki</a></li>
          <li><a href="" title="">Ford</a></li>
          <li><a href="" title="">BMW</a></li>
          <li><a href="" title="">Others</a></li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

我曾多次遇到过这个问题.

此问题是由prototype.js,jquery.js,bootstrap.js等之间的冲突引起的

添加此代码:

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

Answer 2

对于最现代版本的 jQuery 来说，使用上面的解决方案可能不太好。所以我更喜欢简单地使用这样的代码：

$('.dropdown-menu').on('click', function (e) {
   e.stopPropagation();
}}