避免在外部单击时关闭下拉菜单

Question

避免通过单击外部关闭下拉列表。仅单击按钮时显示和隐藏下拉列表。这是小提琴。

<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 Dropdown 事件与 Bootstrap 3 略有不同，因此建议的重复项（和此处）将无法防止下拉菜单在外部点击时关闭。

对于Bootstrap 4，查找clickEvent，当在hide事件中找到时，阻止默认关闭行为。此下拉菜单仅在单击按钮时关闭。

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

演示

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

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

演示 2