jquery - 避免点击外部时关闭下拉菜单

Question

通过单击外部避免下拉列表关闭。仅单击按钮时显示和隐藏下拉列表。继承人 fiddle 。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Answer 1

Bootstrap 4 下拉事件与 Bootstrap 3 略有不同，因此 suggested duplicates (和 here )将无法阻止外部点击时关闭下拉菜单。

对于Bootstrap 4，look for the clickEvent ，并在 hide 事件中发现时，阻止默认关闭行为。仅当单击按钮时，此下拉列表才会关闭。

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent) {
      e.preventDefault();
    }
})

Demo

<小时/>

在某些情况下，您可能希望在单击按钮或菜单时关闭下拉菜单。在这种情况下，您可以检查 clickEvent 目标。例如，查找“nav-link”类。

$('#myDD').on('hide.bs.dropdown', function (e) {
    if (e.clickEvent && e.clickEvent.target.className!="nav-link") {
      e.preventDefault();
    }
});

Demo 2