twitter-bootstrap 如何使用 jquery 关闭引导程序下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19253117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close a bootstrap dropdown menu with jquery?
提问by mrplainswalker
Alright, I asked a question yesterday that turned out to be completely off base. I think I'm on more solid ground now but still having an issue. I have a bootstrap dropdown menu in a button group as follows:
好吧，我昨天问了一个问题，结果完全偏离了基地。我想我现在已经有了更坚实的基础，但仍然有问题。我在按钮组中有一个引导下拉菜单，如下所示：
<div class="btn-group" id="openItems">
<button class="btn btn-custom-top dropdown-toggle" data-toggle="dropdown"><span class="caption"></span><span class="caret"></span></button>
<ul class="dropdown-menu" id="openItemDropdown">
</ul>
</div>
After moving the mouse out of the menu, I'd like it to close. I almost have it working but not quite.
将鼠标移出菜单后，我希望它关闭。我几乎让它工作但不完全。
$(document).ready(function ()
{
$('.dropdown-menu').mouseleave(function ()
{
$(".dropdown-toggle").dropdown('toggle');
});
});
The problem with this is that it toggles all of the dropdowns on the page. I've tried checking .hasClass('active')on $(this)but it always returns false. I suspect this is because $(this)is actually the .dropdown-menu node rather than the .dropdown-togglenode. However, traversing the nodes is tricky and doesn't seem to work across all browsers. There has GOT to be a way to just always close the lists rather than toggling them.
问题在于它会切换页面上的所有下拉菜单。我试过检查.hasClass('active')，$(this)但它总是返回 false。我怀疑这是因为$(this)实际上是 .dropdown-menu 节点而不是.dropdown-toggle节点。但是，遍历节点很棘手，似乎不适用于所有浏览器。必须有一种方法可以始终关闭列表而不是切换它们。
回答by Bobby5193
just add a custom fake class along with dropdown-toggle. for example:
只需添加一个自定义的假类和下拉切换。例如：
<div class="btn-group" id="openItems">
<button class="btn btn-custom-top myFakeClass dropdown-toggle" data-toggle="dropdown">
<span class="caption"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="openItemDropdown"></ul>
</div>
then use that as a selector in the script :
然后将其用作脚本中的选择器：
$(document).ready(function () {
$('.dropdown-menu').mouseleave(function () {
$(".myFakeClass").dropdown('toggle');
});
});
回答by jpaugh
There's an even easier way to close a Bootstrap dropdown with jQuery:
有一种更简单的方法可以使用 jQuery 关闭 Bootstrap 下拉菜单：
$j(".dropdown.open").toggle();
This will close all open dropdowns.
这将关闭所有打开的下拉菜单。
Alternately,
交替，
$j(".dropdown.open").removeClass("open");
This, without any custom code. Of course, it does require you to use the .dropdownclass, even when it is superfluous, as in the case of a btn-group.
这样，无需任何自定义代码。当然，它确实需要您使用.dropdown类，即使它是多余的，例如btn-group.
