Bootstrap下拉菜单在单击元素时不会关闭 [英] Bootstrap dropdown-menu doesn't get close when clicking an element

问题描述

我正在使用javascript函数 dropdown（'toggle'）触发引导下拉菜单，如在他们的文档。

I'm firing the bootstrap dropdown menu by using the javascript function dropdown('toggle') as stated in their docs.

通常下拉列表将隐藏，只要您点击外面或您选择他们的一个选择。

Usually dropdowns would hide whenever you click outside them or you select one of their options.

通过javascript触发时不会发生。

This doesn't happen when firing it through javascript.

在这个复制你会看到两个菜单：

• 使用组件触发器触发的一个工作原理


• 另一个使用右键单击，这不按预期工作。 （它不会在点击外面或甚至元素点击关闭）

我能够手动摆脱使用以下命令点击外部的下拉菜单：

I was able to "manually" get rid of the dropdown menu when clicking outside it by using the following:

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

但是我不太确定为什么下拉菜单的工作方式与您不一样通过正常程序来消灭他们。
不必手动隐藏它们似乎不是最好的解决方案...

But I'm not quite sure why dropdown menus don't work in the same way as when you fire them by the normal procedure. And having to manually hide them doesn't seem like the best solution...

推荐答案

我从boostrap问题论坛获得了答案，他们解释了如何处理它： / p>

I got an answer from boostrap issues forum in which they explained how to deal with it:

B。您在< ul class =下拉菜单> 中缺少< div class =dropdown> code>

B. You're missing a <div class="dropdown"> around the <ul class="dropdown-menu">

C。你没有使用 data-toggle =dropdown（未明确记录，但后跟所有示例并与 http://getbootstrap.com/javascript/#callout-dropdowns-data-required ）

C. You're missing an element with data-toggle="dropdown" (Not explicitly documented, but followed by all the examples and related to the warning in http://getbootstrap.com/javascript/#callout-dropdowns-data-required )

这是一个解决方案的复制。（右边任何地方点击查看下拉菜单）

Here's a reproduction of the solution. (right anywhere click to see the dropdown menu)

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

这篇关于Bootstrap下拉菜单在单击元素时不会关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！