如何防止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();
});