Избегайте раскрывающегося списка при нажатии снаружи

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 Событие выпадающего списка немного отличается от 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();
    }
});

Demo 2

Answer 2

Я думаю, вам просто нужно создать собственное событие переключения между меню, а не использовать один загрузчик, а затем пытаться переопределить вещи

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

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