如何用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節點。 但是，遍歷節點很棘手，似乎並不適用於所有瀏覽器。 有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');
  });
});

Answer 2

使用jQuery關閉Bootstrap下拉列表有一種更簡單的方法：

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

這將關閉所有打開的下拉菜單。

交替，

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

這，沒有任何自定義代碼。 當然，它確實需要你使用.dropdown類，即使它是多余的，就像在btn-group的情況下一樣。