Bootstrap移动端菜单点击无法关闭，独立header文件是否引发问题？

将网站头部放在独立的header.html文件中，index.html已引入Bootstrap 5.3.2所需的CSS与JS资源，通过fetch加载header内容。目前移动端点击汉堡图标可打开菜单，但再次点击无法关闭，请问是否是独立文件导致该问题？

index.html 代码 #

<head>...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css "/>
</head>
<body>
<header>
<script>
document.addEventListener("DOMContentLoaded", function () {
fetch('header.html').then(response => response.text()).then(data => {
document.querySelector('header').innerHTML = data;
})
})
</script>
</header>
.....
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>

header.html 代码 #

<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="https://">Lorem Ipsum</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!-- <i class="bi bi-list"></i> -->
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="./#about-us">about</a></li>
<li class="nav-item"><a class="nav-link" href="./#services">services</a></li>
<li class="nav-item"><a class="nav-link" href="./#team">team</a></li>
<li class="nav-item"><a class="nav-link" href="./#contacts">contact</a></li>
</ul>
</div>
</div>
</nav>

• 核心原因：Bootstrap的交互组件（比如折叠菜单）会在页面加载完成时自动初始化DOM元素并绑定事件。但你通过fetch动态加载header.html内容时，这部分DOM是在Bootstrap初始化之后才插入的，所以汉堡按钮的关闭事件没有被正确绑定，导致只能打开不能关闭。和独立文件本身无关，是动态加载的时机问题。

• 修复步骤：

  1. 移除重复的Bootstrap JS引入：你已经在头部引入了bootstrap.bundle.min.js（包含Popper），底部又重复引入了popper.min.js和bootstrap.min.js，重复加载会引发冲突，必须删除底部的这两个脚本。
  2. 在动态插入header内容后，手动初始化Bootstrap折叠组件：
     修改fetch的回调代码，添加初始化逻辑：

     document.addEventListener("DOMContentLoaded", function () {
       fetch('header.html')
         .then(response => response.text())
         .then(data => {
           document.querySelector('header').innerHTML = data;
           // 手动初始化所有折叠组件
           const collapseElements = document.querySelectorAll('.collapse');
           collapseElements.forEach(el => new bootstrap.Collapse(el));
         })
     })
     

  3. 可选优化：也可以仅针对目标菜单初始化，更高效：

     new bootstrap.Collapse(document.getElementById('navbarNavDropdown'));
     

修改完成后，动态加载的菜单就能正常响应打开/关闭操作了。

内容的提问来源于stack exchange，提问作者Adele