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

Question

我使用的JavaScript函数射击引导下拉菜单dropdown('toggle')如说在他们的文档。

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

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

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

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

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

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

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

Answer 1

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

B.你错过了<div class="dropdown">周围的<ul class="dropdown-menu">

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

这是解决方案的复制品。（在任意位置单击以查看下拉菜单）

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