如何防止引导下拉子菜单单击关闭父下拉菜单答案

【问题标题】：How to prevent bootstrap dropdown submenu click closing the parent dropdown如何防止引导下拉子菜单单击关闭父下拉菜单
【发布时间】：2014-03-12 12:31:45
【问题描述】：

我有一个包含 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。任何帮助将不胜感激。

【问题讨论】：

因为子菜单可能包含checkboxes、radio buttons等来设置其他选项。我想设置/取消设置多个复选框/单选按钮。但是只要我点击内部下拉菜单，父级就会关闭，从而剥夺了我上述的奢侈。
您找到解决方案了吗？
没有。最终，我不得不更改 UI，以便我们只有一个下拉菜单，然后切换 div。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这应该可以。它停止将点击事件传播到控制隐藏菜单的引导事件。

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

【讨论】：