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

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

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