在屏幕上单击其他位置时，请保留演出课程。 我使用bootstrap 4，正确设置了我的HTML结构。我还添加了JavaScript，以防止显示.show类被删除，但它无法正常工作。我要显示的班级

Question

这是需要自定义代码的非标准行为。 简单的解决方案是检查hide.bs.dropdown事件提供的

clickEvent.target

属性。如果目标具有类

.dropdown-item

Answer 1

示例

$(() => { // jQuery Ready

  $(".dropdown").on("hide.bs.dropdown", (e) => {
    if (!$(e.clickEvent?.target).hasClass('dropdown-item')) {
      e.preventDefault();
    }
  })

})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Policy
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Privacy Policy</a>
    <a class="dropdown-item" href="#">Subscription Cancellation</a>
    <a class="dropdown-item" href="#">Cookies Policy</a>
    <a class="dropdown-item" href="#">Supported Currencies</a>
    <a class="dropdown-item" href="#">Acceptable Use Policy</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Connected Account Agreement
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>

<div class="dropdown legal-doc-dropdown m-1">
  <button type="button" class="drop--down--btn dropdown-toggle" data-toggle="dropdown">
        Payments Company Terms
    </button>
  <div class="dropdown-menu">
    <a class="dropdown-item active" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
    <a class="dropdown-item" href="#">Dropdown 4</a>
    <a class="dropdown-item" href="#">Dropdown 5</a>
  </div>
</div>