Bootstrap 移动端菜单无法关闭，通常是因为重复加载了 Bootstrap JS（尤其是同时引入 bootstrap.bundle.min.js 和单独的 bootstrap.min.js + popper.min.js），导致事件监听器冲突，折叠逻辑失效。
bootstrap 移动端菜单无法关闭，通常是因为重复加载了 bootstrap js（尤其是同时引入 `bootstrap.bundle.min.js` 和单独的 `bootstrap.min.js` + `popper.min.js`），导致事件监听器冲突，折叠逻辑失效。
在使用外部 HTML 文件（如 header.html）动态加载 Bootstrap 导航栏时，文件分离本身并不会引发问题——真正导致移动端菜单“点开后无法关闭”的根本原因，是 Bootstrap JavaScript 被重复初始化。
你当前的 index.html 中存在两处 Bootstrap JS 加载：
- ✅ 正确方式：<script src=".../bootstrap.bundle.min.js">（已内置 Popper，支持所有组件，含 Collapse） </script>
- ❌ 冗余且有害：底部额外引入的 popper.min.js + bootstrap.min.js（独立版）
当 bootstrap.bundle.min.js 和 bootstrap.min.js 同时执行时，Navbar 的 data-bs-toggle="collapse" 行为会被多次绑定或相互覆盖，造成 aria-expanded 状态切换失败、collapse 类增删异常，最终表现为：点击汉堡图标菜单展开，再点却无响应、始终处于 show 状态。
✅ 正确配置（仅保留一份 Bootstrap JS）
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"><!-- ✅ 唯一必需的 JS：bootstrap.bundle.min.js（含 Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script><!-- 可选：Bootstrap Icons --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"><header><script>
document.addEventListener("DOMContentLoaded", () => {
fetch('header.html')
.then(res => res.text())
.then(html => {
document.querySelector('header').innerHTML = html;
// ✅ 关键补充：手动触发 Bootstrap 初始化（可选但推荐）
// 因为 DOM 是异步插入的，确保 collapse 组件被正确识别
const navbarToggle = document.querySelector('[data-bs-toggle="collapse"]');
if (navbarToggle) {
new bootstrap.Collapse(
document.querySelector('#navbarNavDropdown'),
{ toggle: false }
);
}
});
});
</script></header><!-- ❌ 删除以下两行（完全移除冗余 JS） --><!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script> --><!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script> -->
? 验证与调试建议
- 打开浏览器开发者工具（F12），在 Console 中执行 bootstrap 或 window.bootstrap，确认仅存在一个有效实例；
- 检查
- 查看
