如何防止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。任何帮助都将不胜感激。

- myusuf

---

因为子菜单可能包含复选框、单选按钮等来设置其他选项。我想设置/取消多个复选框/单选按钮。但是一旦我点击内部下拉菜单，父级菜单就会关闭，使我失去了上述的便利。 - myusuf

你找到解决方案了吗？ - roydukkey

最终，我不得不更改用户界面，以便我们只有一个下拉菜单，然后切换div。 - myusuf

Answer 1

这应该可以起作用。它阻止了点击事件向控制菜单隐藏的Bootstrap事件传播。

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

- roydukkey