如何防止bootstrap下拉子菜單單擊關閉父下拉列表

Question

我有一個包含div的下拉列表，其中包含自己的下拉列表。 單擊內部下拉列表后，父下拉菜單將關閉。 如何防止父下拉關閉？ 以及如何為多個嵌套下拉列表解決同樣的問題？ 碼：

<div class="dropdown selectDropdownDiv">
  <a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
  <div class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel" id="keywordDropdown">
    <div class="dropdown selectDropdownDiv">
      <a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
      <ul class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel">
        <li class="checkbox marginl5">
          <label>
            <span class="checkLabel">Source X</span><input type="checkbox">
          </label>
        </li>
        <li class="checkbox marginl5">
          <label>
            <span class="checkLabel">Source X</span><input type="checkbox">
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

我正在使用Twitter Bootstrap。 任何幫助，將不勝感激。

Answer 1

這應該工作。 它會停止將click事件傳播到控制隱藏菜單的引導事件。

$("#parent-element").on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});