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

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 Dropdown 事件与 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

Answer 2

我认为您只需要制作自己的菜单切换点击事件，而不是使用引导程序提供的一个然后尝试覆盖事物

引导程序 3

var $ddlBtn = $("#my-custom-ddl");
$ddlBtn.on("click", function(){
  var expanded = /true/i.test($ddlBtn.attr("aria-expanded"));
  $ddlBtn
    .attr("aria-expanded", !expanded)
    .parent().toggleClass("open");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="my-custom-ddl" aria-haspopup="true" aria-expanded="false">
    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>

引导程序 4

var $ddlBtn = $("#my-custom-ddl");
$ddlBtn.on("click", function(){
  var expanded = /true/i.test($ddlBtn.attr("aria-expanded"));
  $ddlBtn
    .attr("aria-expanded", !expanded)
    .siblings(".dropdown-menu").toggleClass("show")
    .parent().toggleClass("show");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="my-custom-ddl" aria-haspopup="true" aria-expanded="false">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="my-custom-ddl">
    <a class="dropdown-item" href="#">HTML</a>
    <a class="dropdown-item" href="#">CSS</a>
    <a class="dropdown-item" href="#">Javascript</a>
  </div>
</div>