Bootstrap下拉菜单hidden事件未触发，请求问题排查

我尝试在Bootstrap的dropdown-menu隐藏时触发一个函数，以下是我使用的代码：

原代码 #

JavaScript #

jQuery(document).ready(function($) {
  $(".dropdown-menu").on("hidden.bs.collapse", function(e) {
    console.log(e);
  });
});

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

但控制台没有任何输出，请问我哪里操作错误了？

你有三个地方弄错了：

1. 用错了事件类型：hidden.bs.collapse是Bootstrap折叠组件（Collapse）的隐藏事件，下拉菜单对应的隐藏事件是hidden.bs.dropdown
2. 绑定对象不对：Dropdown的事件要绑定在下拉菜单的触发容器（比如.btn-group）或者触发按钮上，而不是.dropdown-menu本身
3. 脚本顺序错了：如果要用jQuery操作Bootstrap组件，得先引入jQuery，再引入Bootstrap的JS文件，不然jQuery没法正确绑定Bootstrap的事件

另外你还同时引入了方向相反的两套Bootstrap CSS，会导致样式冲突，建议只留一套（根据你的页面布局方向选）。

修正后的代码 #

JavaScript #

jQuery(document).ready(function($) {
  // 绑定到下拉容器.btn-group上
  $(".btn-group").on("hidden.bs.dropdown", function(e) {
    console.log("下拉菜单已隐藏", e);
  });
});

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 先引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.bundle.min.js"></script>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropup
    </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者odedta