单击元素时，Bootstrap 下拉菜单不会关闭

Question

我正在使用 javascript 函数 dropdown('toggle') 触发引导下拉菜单，如 in their docs 所述。

通常，只要您在下拉菜单外部单击或选择其中一个选项，下拉菜单就会隐藏。

通过 javascript 触发时不会发生这种情况。

在this reproduction 中，您会看到两个菜单：

• 使用“组件”触发器触发时按预期工作
• 还有一个，使用右键单击，但没有按预期工作。 （它不会在外部点击甚至元素点击时关闭）

当我使用以下方法在下拉菜单外部单击时，我能够“手动”摆脱下拉菜单：

$('body').removeClass('open');

但我不太确定为什么下拉菜单的工作方式与您通过正常程序触发它们时的方式不同。 而且不得不手动隐藏它们似乎不是最好的解决方案......

Answer 1

I got an answer from boostrap issues forum 他们解释了如何处理它：

B.您在<ul class="dropdown-menu"> 周围缺少<div class="dropdown">

C.您缺少带有 data-toggle="dropdown" 的元素（未明确记录，但后面是所有示例并与 http://getbootstrap.com/javascript/#callout-dropdowns-data-required 中的警告相关）

Here's a reproduction of the solution.（右键点击查看下拉菜单）

HTML 标记

<div class="wrapper">
    <span data-toggle="dropdown"></span>
    <ul class="dropdown-menu" id="menu">
        <li><a href="#">Download file</a></li>
        <li><a href="#">Upload file</a></li>
    </ul>
</div>

Javascript

//context menu for orders table
$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').dropdown('toggle').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    });
});

Answer 2

在 Javascript 中打开不适用于数据切换。我曾经使用此代码从 Javascript 激活下拉菜单：

$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    //showing it close to our cursor
    $('#menu').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    }).show();

    $(document).on('click.contextmenu', function () {
         $('#menu').hide();
         $(document).off('click.contextmenu');
    });
});

Answer 3

我在鼠标上添加了一个监听器，以便在您单击内部时关闭它而不关闭它，因此它会在您想要或在外部单击时关闭：http://jsfiddle.net/q6po6jzh/1/

$(document).mousedown(function (e) {
  var container = $("#menu");

  if (!container.is(e.target) && container.has(e.target).length === 0 && container.parent().hasClass('open')) {
      container.dropdown('toggle')
      container.parent().removeClass('open');
  }
});

但如果你想在点击它时也被关闭，我猜@wero 答案可能会更好。

Answer 4

这将解决您的问题。它将关闭所有打开的下拉菜单。

$('.in,.open').removeClass('in open');

参考： https://stackoverflow.com/a/22632931/6488619