Bootstrap 4.5 实现多级下拉菜单并行展开（不自动关闭其他已开菜单）

本文详解如何在 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(); }});? 注意事项： 幻导航网 发现优质实用网站,开启网络探索之旅！