本文介绍在 bootstrap 4 响应式导航中，解决移动端下拉菜单（尤其是嵌套或级联结构）点击子项链接后整个折叠菜单意外收起的问题，提供原生 javascript 修复方案及最佳实践。
本文介绍在 bootstrap 4 响应式导航中，解决移动端下拉菜单（尤其是嵌套或级联结构）点击子项链接后整个折叠菜单意外收起的问题，提供原生 javascript 修复方案及最佳实践。
在 Bootstrap 4 的默认行为中，当用户点击 .dropdown-item 链接时，浏览器会触发页面跳转（或新标签页打开），同时 Bootstrap 的 Dropdown 插件会监听 hide.bs.dropdown 事件，并在任何交互（包括 <a></a> 点击）后自动关闭所有下拉菜单——这导致你在小屏下点击「招生信息」下拉项中的某个链接时，整个 .navbar-collapse（即汉堡菜单）意外收起，用户体验中断。
虽然问题描述中提到“改用纯 HTML/CSS 实现”，但实际无需放弃 Bootstrap；只需阻止默认的自动关闭逻辑，并保留其样式与响应式能力。推荐以下轻量、兼容性强的解决方案：
✅ 推荐修复：禁用下拉自动关闭，仅对特定链接生效
在页面底部或 <script></script> 标签中添加如下 JavaScript（需确保 Bootstrap JS 已加载）：
<script>
// 阻止 .dropdown-item 点击时触发父级 dropdown 自动关闭
document.addEventListener('click', function (e) {
if (e.target && e.target.matches('.dropdown-item')) {
e.preventDefault();
// 手动跳转（支持 target="_blank"）
const href = e.target.getAttribute('href');
const target = e.target.getAttribute('target') || '_self';
if (href) {
if (target === '_blank') {
window.open(href, target);
} else {
window.location.href = href;
}
}
// 关键：手动关闭当前 dropdown，避免残留展开状态
const dropdown = e.target.closest('.dropdown');
if (dropdown) {
const bsDropdown = bootstrap.Dropdown.getInstance(dropdown);
if (bsDropdown) bsDropdown.hide();
}
}
});
</script>
⚠️ 注意事项：
- 此方案要求 Bootstrap 5+ 使用
bootstrap.Dropdown；若使用 Bootstrap 4（无模块化实例 API），请改用 jQuery 方式（见下方兼容写法）； - 若项目仍基于 Bootstrap 4 + jQuery，请替换为：
$(document).on('click', '.dropdown-item', function(e) {
e.preventDefault();
const $this = $(this);
const href = $this.attr('href');
const target = $this.attr('target') || '_self';
if (href) {
if (target === '_blank') {
window.open(href, target);
} else {
window.location.href = href;
}
}
// 手动关闭对应 dropdown（Bootstrap 4 兼容）
$(this).closest('.dropdown').find('[data-toggle="dropdown"]').dropdown('hide');
});
? 根本原因说明
Bootstrap 4 的 Dropdown 插件默认将所有 .dropdown-item 视为“触发关闭”的交互源，即使该链接已设置 target="_blank" 或本就应跳转。它未区分「内部导航」与「外部跳转」，也未考虑多级折叠菜单中用户希望保持主菜单展开的合理预期。
✅ 最佳实践建议
- ✅ 优先使用
data-bs-toggle="dropdown"（BS5）或data-toggle="dropdown"（BS4）语义化标记，避免手动绑定事件冲突； - ✅ 对含
target="_blank"的链接，务必显式调用window.open()并传入target，防止被浏览器拦截； - ❌ 避免直接移除
data-toggle属性——这将丢失下拉动画、键盘支持（如 Esc 关闭、Tab 导航）等可访问性特性； - ✅ 如需更复杂嵌套下拉（如二级菜单），建议升级至 Bootstrap 5.3+ 并启用
autoClose: false选项（需自定义初始化）。
通过上述方案，你既能保留 Bootstrap 的成熟组件生态与响应式能力，又能精准控制菜单行为，彻底解决移动端点击即收、体验割裂的问题。
