javascript - 如何使用 jquery 关闭 Bootstrap 下拉菜单？

Question

好吧，我昨天问了一个问题，结果证明完全没有根据。我认为我现在的立场更加稳固，但仍有问题。我在按钮组中有一个 Bootstrap 下拉菜单，如下所示:

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

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

Answer 1

只需添加一个自定义的假类以及下拉开关。例如:

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