本文详解如何在 Bootstrap 4.5 中实现多个导航栏下拉菜单同时保持展开状态，通过拦截 hide.bs.dropdown 事件并结合点击溯源逻辑，避免默认的“一开一关”互斥行为。

本文详解如何在 bootstrap 4.5 中实现多个导航栏下拉菜单同时保持展开状态，通过拦截 `hide.bs.dropdown` 事件并结合点击溯源逻辑，避免默认的“一开一关”互斥行为。

在 Bootstrap 4.5 默认行为中，当一个 .dropdown 被打开时，其他已展开的下拉菜单会自动收起——这是由其内部的 Dropdown 插件强制实现的互斥逻辑所致。但在侧边栏（sidemenu）等自定义场景中，用户常需多级菜单并行展开，例如同时查看“Contracts”和“Quote & Order”子项，此时默认行为反而成为障碍。

解决该问题的关键不在于阻止所有关闭操作，而在于区分关闭意图：
✅ 允许用户主动点击同一 toggle 按钮来关闭当前下拉菜单；
❌ 阻止因点击其他 dropdown-toggle 导致的“连带关闭”。

Bootstrap 提供了标准事件钩子 show.bs.dropdown 和 hide.bs.dropdown，但直接监听 hide.bs.dropdown 并 e.preventDefault() 会导致所有关闭失效（包括手动关闭），因此必须精准判断触发原因。

✅ 推荐方案：基于 relatedTarget 的智能拦截

Bootstrap 在 hide.bs.dropdown 事件中会将触发新展开的元素（即用户刚点击的另一个 .dropdown-toggle）赋值给 e.relatedTarget。我们可利用这一机制，配合记录最近一次点击的 toggle 元素，实现条件拦截：

let lastTrigger = null;

// 记录每次点击的 dropdown-toggle 元素
$('.nav-link.dropdown-toggle').on('click', function() {
  lastTrigger = this;
});

// 在 hide 事件中判断：若关闭非因点击自身触发，则阻止默认关闭
$('.dropdown').on('hide.bs.dropdown', function(e) {
  if (lastTrigger && lastTrigger !== e.relatedTarget) {
    e.preventDefault();
  }
});

? 原理说明：当用户点击「Contracts」toggle 时，lastTrigger 指向它；随后点击「Quote & Order」toggle，Bootstrap 触发「Contracts」的 hide.bs.dropdown 事件，此时 e.relatedTarget 指向「Quote & Order」toggle —— 二者不等，故 e.preventDefault() 生效，Contracts 下拉菜单保持展开。

⚠️ 注意事项与最佳实践

• ID 唯一性：示例中两个 均使用 id="navbarDropdown"，这违反 HTML 规范（ID 必须唯一），虽不影响功能，但建议改为类名（如 class="dropdown-toggle-btn"）或动态 ID（如 id="dropdown-contracts"），避免潜在冲突。
• 事件委托兼容性：若菜单为动态渲染（如 AJAX 加载），请改用事件委托：

  $(document).on('click', '.nav-link.dropdown-toggle', function() {
    lastTrigger = this;
  });
  $(document).on('hide.bs.dropdown', '.dropdown', function(e) {
    if (lastTrigger && lastTrigger !== e.relatedTarget) {
      e.preventDefault();
    }
  });

• 移动端适配：本方案对桌面端和触屏设备均有效；若需支持手势关闭（如点击空白处），可额外监听 document 点击事件并重置 lastTrigger，但通常非必需。
• Bootstrap 版本注意：代码基于 Bootstrap 4.5+（对应文档 v4.6），不适用于 Bootstrap 5（其事件命名及 API 已变更，需使用 bs.dropdown 命名空间及 hidePrevented 判断）。

✅ 完整初始化脚本（含侧边栏适配）

将以下 JS 放置于 Bootstrap Bundle 之后、自定义逻辑之前即可生效：

<script>
$(function() {
  // 侧边栏高度适配（保留原有逻辑）
  const fixHeight = () => {
    $('.navbar-nav').css('max-height', document.documentElement.clientHeight - 150);
  };
  fixHeight();
  $(window).resize(fixHeight);
  $('.navbar .navbar-toggler').on('click', fixHeight);

  // 移动端菜单开关
  $('.navbar-toggler, .overlay').on('click', function() {
    $('.mobileMenu, .overlay').toggleClass('open');
  });

  // ✨ 核心：允许多个下拉菜单并行展开
  let lastTrigger = null;
  $('.nav-link.dropdown-toggle').on('click', function() {
    lastTrigger = this;
  });
  $('.dropdown').on('hide.bs.dropdown', function(e) {
    if (lastTrigger && lastTrigger !== e.relatedTarget) {
      e.preventDefault();
    }
  });
});
</script>

至此，你的 Bootstrap 4.5 侧边栏导航即可支持任意数量下拉菜单独立开关、并行展开，兼顾用户体验与代码健壮性。无需修改 Bootstrap 源码，纯前端事件控制，轻量且可维护性强。