本文介绍在 bootstrap 4 响应式导航栏中，当嵌套下拉菜单（如移动端汉堡菜单内的下拉项）被点击时意外收起的问题，提供原生 javascript 修复方案及最佳实践。
本文介绍在 bootstrap 4 响应式导航栏中，当嵌套下拉菜单（如移动端汉堡菜单内的下拉项）被点击时意外收起的问题，提供原生 javascript 修复方案及最佳实践。
在 Bootstrap 4 中，下拉菜单（.dropdown）默认行为是：点击任意 <a></a> 链接后，自动触发 hide.bs.dropdown 事件并关闭整个下拉区域——这在单层导航中合理，但在多级结构（如移动端展开的 .navbar-collapse 内嵌 .dropdown）中会导致体验中断：用户点击“招生”下拉项中的子链接（如“本科教育”）时，不仅页面跳转，父级下拉菜单也瞬间收起，影响操作连贯性。
根本原因在于 Bootstrap 的 Dropdown 插件监听了 click 事件，并对所有 .dropdown-item 或 <a></a> 标签执行默认关闭逻辑。而你的 HTML 结构中，<a class="dropdown-item" href="?page=undergraduate"></a> 属于下拉菜单内部链接，点击即触发关闭。
✅ 推荐解决方案：阻止默认关闭行为（不移除 Bootstrap，保持样式与响应式能力）
只需在页面加载完成后，为所有下拉菜单项添加事件监听，阻止其触发 Bootstrap 的自动关闭：
<script>
document.addEventListener('DOMContentLoaded', function() {
// 选择所有下拉菜单中的可点击项（含 dropdown-item 和自定义链接）
const dropdownItems = document.querySelectorAll('.dropdown-menu .dropdown-item, .dropdown-menu > a:not(.dropdown-toggle)');
dropdownItems.forEach(item => {
item.addEventListener('click', function(e) {
// 阻止 Bootstrap 默认的关闭行为
e.stopPropagation();
// 可选：手动关闭其他已展开的下拉菜单（保持单开逻辑）
// const openDropdowns = document.querySelectorAll('.dropdown.show');
// openDropdowns.forEach(d => d.classList.remove('show'));
});
});
});
</script>
⚠️ 注意事项：
- 此脚本需置于 Bootstrap JS 之后（确保
data-toggle="dropdown"已初始化）； -
e.stopPropagation()是关键：它阻止点击事件冒泡至.dropdown容器，从而避免触发 Bootstrap 内部的hide逻辑； - 若需支持键盘导航（如 Esc 关闭），保留 Bootstrap 原生事件监听，仅干预鼠标点击；
- 不建议完全弃用 Bootstrap（如问题答案中“重写为纯 HTML/CSS”），否则将丢失响应式断点、无障碍属性（ARIA）、触摸适配及动画过渡等核心能力。
? 进阶优化：若项目使用 jQuery，也可用更简洁写法（兼容 Bootstrap 4）：
$(document).on('click', '.dropdown-menu a', function(e) {
e.stopPropagation();
});
总结：Bootstrap 下拉菜单的自动关闭是设计使然，而非 Bug。通过精准拦截事件传播，即可在保留框架全部功能的前提下，实现符合业务逻辑的交互行为——既保障移动端导航可用性，又无需推翻现有架构。
