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

Answer 3

从以下位置编辑按钮html：

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <i class="fa fa-tags"></i>
  Brand Store                                        
  <span class="caret pull-right"></span>
</button>

分为：

<button class="btn btn-default" type="button">

如果这项工作让我知道。谢谢

Answer 4

Amit Bera接受的答案大部分是正确的。但是，没有必要使用jQuery('*')将事件处理程序附加到所有元素。相反，对于自动加载的Bootstrap组件，我们可以将处理程序直接附加到document。对于必须手动初始化的Bootstrap组件，使用委托事件很重要，否则事件处理程序将不会动态附加到添加到页面的元素上。这是更新的答案：

const $document = jQuery(document);
let isBootstrapEvent = false;

// These events are attached directly to the document by bootstrap
const BOOTSTRAP_DOCUMENT_EVENTS = [
  'hide.bs.dropdown',
  'hide.bs.collapse',
  'hide.bs.modal',
];

BOOTSTRAP_DOCUMENT_EVENTS.forEach((eventName) => {
  $document.on(eventName, () => {
    isBootstrapEvent = true;
  });
});

// These events are bound directly to the relevant elements
const BOOTSTRAP_OPT_IN_EVENTS = {
  '[data-toggle="tooltip"]': 'hide.bs.tooltip',
  '[data-toggle="popover"]': 'hide.bs.popover',
};

Object.keys(BOOTSTRAP_OPT_IN_EVENTS).forEach((selector) => {
  const eventName = BOOTSTRAP_OPT_IN_EVENTS[selector];
  $document.on(eventName, selector, () => {
    isBootstrapEvent = true;
  });
});

const originalHide = Element.hide;
Element.addMethods({
  hide(element) {
    if (isBootstrapEvent) {
      isBootstrapEvent = false;
      return element;
    }
    return originalHide(element);
  },
});

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

4 个答案: