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

我使用javascript函数dropdown'toggle'启动引导下拉菜单，如上所述

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

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

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

使用components触发器触发时按预期工作的组件 还有一个，用鼠标右键点击，效果不理想。它不会在单击外部时关闭，甚至不会在单击元素时关闭 当我在下拉菜单外单击时，我可以使用以下命令手动删除下拉菜单：

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

但我不太清楚为什么下拉菜单的工作方式与按正常程序启动时的工作方式不同。

---

而且手动隐藏它们似乎不是最好的解决方案…

在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');
    });
});

---

我在鼠标上添加了一个侦听器，当您单击鼠标内部时，它将关闭，而不关闭鼠标，因此它将在您需要或单击鼠标外部时关闭：

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

他们在其中解释了如何处理它：

B.你错过了一场比赛

C.缺少数据切换=下拉列表的元素，未明确记录，但后面是所有示例，并与中的警告相关

在任意位置单击鼠标右键以查看下拉菜单

HTML标记

---

这会解决你的问题。它将关闭所有打开的下拉列表

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

参考：

---

你的例子对我很有用。或者我做错了什么，在这个例子中，你会看到两个不同的下拉菜单。使用components触发器触发时按预期工作的组件。还有一个，当你用鼠标右键点击的时候，它不能像预期的那样工作。它不会关闭，你必须手动操作，这就是我试图避免的。

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

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

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