单击某个元素时，引导下拉菜单无法关闭

Question

我使用javascript函数dropdown（'toggle'）启动引导下拉菜单，如他们的文档中所述。

通常，每当您在下拉列表外部单击或选择其中一个选项时，下拉列表都会隐藏。

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

在此复制中，您将看到两个菜单：

• 使用"组件"触发器按预期工作的人
• 另一个，使用右键单击，它不像预期的那样工作。（它不会在单击外部或甚至在元素单击时关闭）

当我在下拉菜单外单击时，我可以通过以下方式“手动”摆脱下拉菜单：

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

但是我不太确定为什么下拉菜单的工作方式和你用正常程序触发它们的方式不一样。不得不手动隐藏它们似乎不是最好的解决办法...

Answer 1

我在鼠标上添加了一个监听器，当你点击里面时，它不会关闭，所以当你想要或点击外面时，它会关闭：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 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

我从boostrap问题论坛得到了一个答案，他们解释了如何处理它：

B.您缺少一个

C.缺少带有data toggle=“dropdown”的元素（未明确记录，但后面有所有示例，并与中的警告相关）http://getbootstrap.com/javascript/#callout-下拉列表（需要数据）

这是溶液的复制品。（在任意位置单击鼠标右键以查看下拉菜单）

超文本标记语言

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