如何防止bootstrap下拉子菜单单击关闭父下拉列表

Question

I have a dropdown that contains a div which contains a dropdown of its own. As soon as I click the inner dropdown, the parent dropdown closes. How to prevent the parent dropdown from closing ? And how to solve the same problem for multiple nested dropdowns ? Code:

<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>

I am using Twitter Bootstrap. Any help would be appreciated.

Answer 1

This should work. It stop the propagation of the click event to the bootstrap event that controls hiding the menu.

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