Bootstrap 5不触发show.bs.dropdown和hide.bs.dropdown事件如何解决

核心原因 #

• 事件绑定对象错误：Bootstrap 5 调整了 dropdown 事件的触发主体，所有show.bs.dropdown、hide.bs.dropdown等事件均触发在带有data-bs-toggle="dropdown"的触发按钮上，而非 Bootstrap 4 中所用的父级.dropdown容器，因此绑定到.dropdown上无法捕获事件。
• 代码执行时机错误：事件绑定代码执行时 DOM 尚未完全渲染，导致没有匹配到对应元素完成绑定。
• jQuery 桥接失效：如果 webpack 中未正确配置全局 jQuery，或导入顺序为 Bootstrap 在前、jQuery 在后，Bootstrap 5 不会自动注册 jQuery 版的事件接口，导致 jQuery 绑定的 bs 事件无法被触发。

解决方案 #

方案1：修正 jQuery 事件绑定代码 #

首先调整导入顺序，在入口文件开头先挂载 jQuery 到全局，再导入 Bootstrap：

// 入口文件（如index.js）最开头添加
import $ from 'jquery';
window.$ = window.jQuery = $;
// 后导入Bootstrap
import 'bootstrap';

然后修正事件绑定逻辑：

// 确保DOM加载完成后再绑定事件
$(function() {
  // 绑定到dropdown触发元素
  $('.dropdown-toggle').on('show.bs.dropdown', function() {
    $(this).next('.dropdown-menu').stop(true, true).slideDown();
  });

  $('.dropdown-toggle').on('hide.bs.dropdown', function(e) {
    // 阻止默认隐藏行为，等动画执行完成再手动处理状态
    e.preventDefault();
    const $toggle = $(this);
    const $menu = $toggle.next('.dropdown-menu');
    $menu.stop(true, true).slideUp(400, function() {
      $menu.removeClass('show');
      $toggle.removeClass('show').attr('aria-expanded', 'false');
      $toggle.parent('.dropdown').removeClass('show');
    });
  });
});

方案2：纯CSS实现动画（更推荐，无JS兼容问题） #

不需要修改任何JS逻辑，直接添加以下CSS即可实现平滑下拉动画：

.dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

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