为什么点击后引导菜单消失？答案

【问题标题】：Why the bootstrap menu disappearing after click on it?为什么点击后引导菜单消失？
【发布时间】：2015-10-02 02:17:02
【问题描述】：

我在我的网站上使用 Magento 和 jQuery。当我单击下拉按钮时，我的引导切换菜单上有一些问题，下拉菜单消失了。

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

【问题讨论】：

你能截图并突出显示问题吗？
很抱歉，我无法发布屏幕截图，请打开此链接，在左侧边栏中，当您单击将要移动的任何类别时，您可以看到类别链接。 naijashop.com.ng/index.php
尝试在这里上传imgur.com 并给我截图的链接谢谢。
i.imgur.com/KT8dkQp.jpg?1
如果点击该链接接下来会发生什么？

标签： jquery html css twitter-bootstrap magento

【解决方案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);
        }
    });
})();

【讨论】：

这对我很有帮助

【解决方案2】：

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

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

【讨论】：

【解决方案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">

让我知道这是否有效。谢谢

【讨论】：

谢谢！现在这对我有用，但这是一种好方法吗？
是的，希望如此。再次尝试仔细检查。 :)
删除 data-toggle="dropdown" 后，我看不到下拉列表。有没有其他方法可以做到这一点
@vashishth 请提出一个新问题。我会尽力帮助你解决它。谢谢

【解决方案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);
  },
});

【讨论】：