Bootstrap4.5多级下拉不关闭技巧

本文深入解析了在 Bootstrap 4.5 中突破默认“单开互斥”限制、实现多个下拉菜单并行展开的实用方案——通过精准拦截 `hide.bs.dropdown` 事件并结合 `lastTrigger` 状态判断，智能区分用户主动关闭与被动连带关闭，既无需修改源码或引入第三方插件，又完整保留 Esc 键、点击外部区域等原生交互逻辑；特别适配侧边栏导航、多层级配置面板等复杂场景，并附带移动端高度自适应优化技巧，是兼顾兼容性、健壮性与开发体验的落地级最佳实践。

本文详解如何在 Bootstrap 4.5 中禁用默认的「单开互斥」行为，使多个 navbar 下拉菜单可同时保持展开状态，适用于侧边栏式导航等定制化场景。

本文详解如何在 Bootstrap 4.5 中禁用默认的「单开互斥」行为，使多个 navbar 下拉菜单可同时保持展开状态，适用于侧边栏式导航等定制化场景。

在 Bootstrap 4.x 默认行为中，当用户点击一个 .dropdown-toggle 触发下拉菜单时，框架会自动关闭所有其他已展开的 .dropdown 组件——这是通过内部事件机制实现的「互斥折叠」逻辑。但在侧边栏（sidemenu）、多层级配置面板或模块化导航等实际项目中，常需支持多个下拉菜单并行展开，以提升操作效率与用户体验。

直接阻止 click 事件传播（如 e.stopPropagation()）或调用 e.preventDefault() 仅能临时抑制默认跳转，但无法真正解耦下拉组件间的关闭联动。正确方案应基于 Bootstrap 提供的原生事件钩子，精准干预其关闭逻辑。

✅ 推荐解决方案：利用 hide.bs.dropdown 事件拦截非主动关闭

Bootstrap 的 Dropdown 组件在即将关闭前会触发 hide.bs.dropdown 事件，并通过 e.relatedTarget 指向触发新下拉的元素（即另一个 .dropdown-toggle）。我们可据此判断：

• 若 e.relatedTarget 是当前 dropdown 的 toggle 元素 → 属于用户主动点击关闭，允许关闭；
• 若 e.relatedTarget 是其他 dropdown 的 toggle → 属于「因打开新菜单而被连带关闭」→ 阻止默认行为。

配合一个全局变量记录最近一次点击的 toggle 元素，即可实现精准控制：

// 记录最后一次被点击的下拉触发器
let lastTrigger = null;

// 捕获所有下拉触发器的点击事件
$('.nav-link.dropdown-toggle').on('click', function() {
  lastTrigger = this;
});

// 监听所有下拉组件的隐藏前事件
$('.dropdown').on('hide.bs.dropdown', function(e) {
  // 当存在 lastTrigger 且它不等于本次关闭所关联的触发器时，
  // 说明是「被其他下拉连带关闭」，应阻止
  if (lastTrigger && lastTrigger !== e.relatedTarget) {
    e.preventDefault();
  }
});

? 注意事项：

• 此方案兼容 Bootstrap 4.5+（含 4.6），无需修改源码或引入额外插件；
• 请确保该脚本在 Bootstrap JS 初始化之后执行（推荐置于 bootstrap.bundle.min.js 加载后）；
• 若页面中存在非 navbar 区域的下拉菜单（如工具栏、卡片内），建议将选择器限定为 '.mobileMenu .dropdown' 或 '.navbar .dropdown'，避免影响全局行为；
• lastTrigger 在用户点击空白处、按 Esc 键或调用 $('#myDropdown').dropdown('hide') 等非 click 场景下不会更新，此时 e.relatedTarget 为 null，e.preventDefault() 不会被触发，保障原生交互逻辑不受损。

? 补充：侧边栏适配优化（可选）

由于您的导航已改造为固定高度侧边栏，建议同步增强健壮性：

// 自动适配移动端菜单最大高度（防滚动失效）
function fixSidebarHeight() {
  const maxHeight = window.innerHeight - 150;
  $('.mobileMenu .navbar-nav').css('max-height', maxHeight + 'px');
}
fixSidebarHeight();
$(window).on('resize', fixSidebarHeight);

✅ 最终效果验证

启用上述逻辑后：

• 点击「Contracts」→ 下拉展开 ✔️
• 再点击「Quote & Order」→ 前者保持展开，后者也展开 ✔️
• 点击任一已展开菜单的 toggle → 仅该菜单收起 ✔️
• 点击菜单外部区域或按 Esc → 所有下拉统一收起（符合预期）✔️

此方案兼顾语义清晰性、可维护性与框架兼容性，是 Bootstrap 4 多下拉共存场景下的最佳实践。

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