Bootstrap 移动端菜单点击后无法关闭，根本原因是重复加载了 Bootstrap JavaScript（尤其是 bootstrap.min.js 与 bootstrap.bundle.min.js 同时存在），导致事件监听器冲突和组件初始化异常。

bootstrap 移动端菜单点击后无法关闭，根本原因是重复加载了 bootstrap javascript（尤其是 `bootstrap.min.js` 与 `bootstrap.bundle.min.js` 同时存在），导致事件监听器冲突和组件初始化异常。

在使用外部 HTML 文件（如 header.html）动态注入导航栏时，开发者常误以为问题出在「分离式结构」上——例如通过 fetch() 加载

内容。但实际与文件拆分无关，核心症结在于 Bootstrap 的重复引入。

Bootstrap 提供两种 JS 包：

• bootstrap.bundle.min.js：已内置 Popper（用于下拉、tooltip 等定位），无需额外引入；
• bootstrap.min.js：需单独搭配 Popper 和 jQuery（旧版） 才能正常工作。

你的原始代码中同时加载了：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<!-- ✅ 正确：bundle 版本（含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><!-- ❌ 冲突：额外加载独立 Popper + bootstrap.min.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>

这种双重加载会导致：

• Navbar 组件被初始化两次；
• data-bs-toggle="collapse" 的点击事件绑定混乱；
• aria-expanded 属性状态与 DOM 实际折叠状态不同步 → 菜单“看似打开”，实则控制逻辑失效。

✅ 正确做法：仅保留 bootstrap.bundle.min.js，彻底移除后续所有 Popper 和 bootstrap.min.js 的 <script> 标签</script>。

✅ 修复后的 index.html 关键片段

  <!-- 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", function () {
        fetch('header.html')
          .then(response => response.text())
          .then(data => {
            document.querySelector('header').innerHTML = data;
          })
          .catch(err => console.error("Header load failed:", err));
      });
    </script></header><!-- ⚠️ 此处不再添加任何 Popper 或 bootstrap.min.js -->

? 验证技巧

• 打开浏览器开发者工具（F12）→ Console，输入 bootstrap 或 bootstrap.Alert，若报错或返回 undefined，说明 Bootstrap 未正确加载；
• 检查 Elements 面板中 的 aria-expanded 属性：点击后应切换为 "true"/"false"；若始终为 "false" 或不变化，即为初始化失败。

? 补充建议

• 动态注入 HTML 后，Bootstrap 组件（如 Collapse、Dropdown）会自动初始化，无需手动调用 new bootstrap.Collapse(...) —— 这是 Bootstrap 5+ 的默认行为；
• 若未来需在 fetch 完成后执行自定义逻辑（如监听 collapse 事件），可使用原生事件：

  document.addEventListener('show.bs.collapse', (e) => {
    console.log('Menu opening:', e.target.id);
  });

遵循「一次加载、完整 bundle」原则，即可彻底解决移动端菜单卡死问题，且兼容 header 分离、SPA 式结构等现代前端实践。