12

好吧，我昨天问了一个问题，结果证明这完全不符合标准。我认为我现在处于更坚实的基础上，但仍然有问题。我在按钮组中有一个引导下拉菜单，如下所示：

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

将鼠标移出菜单后，我希望它关闭。我几乎让它工作但不完全。

$(document).ready(function ()
{
    $('.dropdown-menu').mouseleave(function ()
    {

        $(".dropdown-toggle").dropdown('toggle');
    });
});

这样做的问题是它会切换页面上的所有下拉菜单。我试过检查.hasClass('active')，$(this)但它总是返回错误。我怀疑这是因为$(this)实际上是 .dropdown-menu 节点而不是.dropdown-toggle节点。但是，遍历节点很棘手，并且似乎不适用于所有浏览器。必须有一种方法来总是关闭列表而不是切换它们。

4

2 回答 2

18

只需添加一个自定义假类以及下拉切换。例如：

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

然后将其用作脚本中的选择器：

$(document).ready(function () {
  $('.dropdown-menu').mouseleave(function () {
    $(".myFakeClass").dropdown('toggle');
  });
});
于 2013-10-08T16:31:58.147 回答
3

还有一种更简单的方法可以使用 jQuery 关闭 Bootstrap 下拉菜单：

$j(".dropdown.open").toggle();

这将关闭所有打开的下拉菜单。

交替，

$j(".dropdown.open").removeClass("open");

这个，没有任何自定义代码。当然，它确实需要您使用.dropdown该类，即使它是多余的，例如btn-group.

于 2015-06-16T13:02:15.180 回答