Bootstrap 4.5 多级下拉菜单不自动关闭实现

本文深入解析了如何在 Bootstrap 4.5 中突破其默认的“单开互斥”限制，实现侧边栏多级下拉菜单并行展开——通过巧妙监听 `hide.bs.dropdown` 事件并结合 `click` 上下文判断，精准拦截非用户主动触发的隐式关闭行为，既无需修改 HTML 结构或 CSS，也不依赖第三方插件，仅用几行轻量、稳定、无障碍友好的 JavaScript 代码，就让垂直导航菜单真正支持多模块同时展开浏览，特别适合管理后台、企业级应用等复杂侧边栏场景，且方案兼容性强、迁移成本低，是定制化前端导航开发中兼具实用性与工程价值的高效实践。

本文详解如何在 Bootstrap 4.5 中禁用默认的「单开互斥」行为，使侧边栏导航中的多个 `.dropdown` 可同时保持展开状态，通过监听 `hide.bs.dropdown` 事件并智能拦截非显式关闭操作来实现。

在 Bootstrap 默认行为中，当一个下拉菜单（.dropdown）被打开时，其他已展开的下拉菜单会自动收起——这是由 Bootstrap 的内部逻辑控制的，旨在保证移动端体验简洁。但在定制化侧边栏（sidemenu）场景中（如本例中将 navbar 改造成垂直折叠菜单），用户往往需要多个子菜单并行展开，以便快速浏览不同模块的选项。直接使用 data-toggle="dropdown" 或原生 JS 触发无法满足该需求，需通过事件干预实现「多开不互斥」。

核心原理：精准拦截隐式关闭

Bootstrap 提供了标准事件钩子，其中 hide.bs.dropdown 在下拉菜单即将关闭前触发。关键在于区分两种关闭意图：

• ✅ 显式关闭：用户点击同一菜单的 toggle 按钮（或按 Esc 键），此时 e.relatedTarget 指向该 toggle 元素；
• ❌ 隐式关闭：用户点击其他菜单的 toggle 按钮，导致当前菜单被强制关闭，此时 e.relatedTarget 指向另一个 toggle 元素。

我们利用这一差异，在 click 事件中记录最新触发的 .dropdown-toggle 元素，再于 hide.bs.dropdown 中比对 relatedTarget —— 若不匹配，即为隐式关闭，调用 e.preventDefault() 阻止其关闭。

完整可运行解决方案

将以下 JavaScript 代码置于 Bootstrap 和 jQuery 加载之后（推荐放在 前）：

// 记录最后一次点击的 dropdown-toggle 元素
let lastTrigger = null;

// 绑定点击事件，标记最新触发源
$('.nav-link.dropdown-toggle').on('click', function() {
  lastTrigger = this;
});

// 监听所有 dropdown 的隐藏事件
$('.dropdown').on('hide.bs.dropdown', function(e) {
  // 仅当关闭动作非由用户主动点击该菜单触发时，才阻止默认行为
  if (lastTrigger && lastTrigger !== e.relatedTarget) {
    e.preventDefault();
  }
});

✅ 兼容性说明：此方案适配 Bootstrap 4.5+（含 4.6），无需修改 HTML 结构或 CSS，完全基于官方事件 API，稳定可靠。

注意事项与最佳实践

• ID 唯一性：示例中多个下拉项共用 id="navbarDropdown"，虽不影响功能，但不符合 HTML 规范。建议为每个 dropdown-toggle 设置唯一 ID（如 id="dropdown-contracts"、id="dropdown-quote"），便于后续扩展（如单独控制某菜单）。
• 移动端适配：若需支持触摸设备上的「点击空白处收起」逻辑，可额外监听 document 点击事件并手动关闭所有 dropdown（本例未启用，因侧边栏通常依赖显式 toggle 控制）。
• 性能优化：事件委托更佳写法（尤其当菜单动态增删时）：

  $(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();
    }
  });

• 无障碍支持：保留 aria-expanded 属性的正确切换（Bootstrap 自动处理），确保屏幕阅读器仍能准确播报菜单状态。

总结

通过组合使用 click 记录上下文 + hide.bs.dropdown 条件拦截，我们以最小侵入方式解除了 Bootstrap 下拉菜单的互斥限制。该方案逻辑清晰、无副作用、易于维护，是定制化导航组件（尤其是侧边栏、管理后台菜单）的推荐实践。如后续升级至 Bootstrap 5，事件名略有变化（hide.bs.dropdown → hide.bs.dropdown 保持一致，但需确认 relatedTarget 行为），迁移成本极低。

终于介绍完啦！小伙伴们，这篇关于《Bootstrap 4.5 多级下拉菜单不自动关闭实现》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！