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）
- ❌ 冗余且有害：底部额外引入的 popper.min.js + bootstrap.min.js（独立版）
当 bootstrap.bundle.min.js 和 bootstrap.min.js 同时执行时，Navbar 的 data-bs-toggle="collapse" 行为会被多次绑定或相互覆盖，造成 aria-expanded 状态切换失败、collapse 类增删异常，最终表现为：点击汉堡图标菜单展开，再点却无响应、始终处于 show 状态。
✅ 正确配置（仅保留一份 Bootstrap JS）
<head>
<!-- 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">
</head>
<body>
<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> -->
</body>? 验证与调试建议
- 打开浏览器开发者工具（F12），在 Console 中执行 bootstrap 或 window.bootstrap，确认仅存在一个有效实例；
- 检查 <button> 元素的 aria-expanded 属性是否随点击实时切换（true ↔ false）；
- 查看 <div class="collapse navbar-collapse"> 是否正确添加/移除 show 类；
- 若仍异常，可在 fetch 成功后显式调用：
bootstrap.Collapse.getInstance(document.getElementById('navbarNavDropdown'))?.toggle();
? 总结
不要混用 bootstrap.bundle.min.js 和 bootstrap.min.js + popper.min.js。前者是后两者的整合包，功能完整且经过严格兼容性测试；重复加载不仅浪费资源，更会破坏 Bootstrap 的内部状态管理机制。动态加载 HTML 片段（如 header.html）完全可行，只需确保：
- Bootstrap 仅初始化一次；
- 组件 DOM 插入后，必要时手动触发 Collapse 实例化（尤其在 DOMContentLoaded 之后动态渲染时）。
遵循以上规范，你的移动端导航菜单即可正常展开/收起，响应流畅，无需修改 header.html 结构。
