Bootstrap 5.3.0导航栏：index.html可展开无法折叠，单独页面正常

问题描述 #

我使用Bootstrap 5.3.0制作响应式导航栏，单独访问navbar.html时导航栏功能正常，但通过jQuery的load方法将其嵌入到index.html后，汉堡按钮仅能展开导航栏，再次点击无法折叠。浏览器元素检查显示：首次点击后collapse类变为collapse show，导航栏展开；第二次点击时类先变为collapsing，随即又变回collapse show，无法完成折叠。

原因分析 #

• 重复加载Bootstrap JS：navbar.html中已引入bootstrap.bundle.min.js，嵌入到index.html后，index.html再次加载该脚本，导致Bootstrap折叠组件被初始化两次，状态逻辑混乱。
• 冗余HTML结构：navbar.html作为被加载的片段，包含了完整的html、head、body标签，加载后会产生冗余元素，干扰组件正常初始化。

解决方案 #

1. 精简navbar.html，仅保留导航栏核心HTML代码，移除完整页面结构及重复引入的资源。
2. 确保整个项目中仅加载一次Bootstrap JS，统一在index.html中引入。
3. 利用jQueryload方法的回调函数，在导航栏加载完成后重新初始化折叠组件，确保状态正常。

修改后的代码 #

navbar.html #

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand ps-1" href="#">Brand Name</a>
    <button id="collapseButton" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link" href="#">Link 1</a>
        <a class="nav-link" href="#">Link 2</a>
        <a class="nav-link" href="#">Link 3</a>
        <a class="nav-link" href="#">Link 4</a>
        <a class="nav-link" href="#">Link 5</a>
        <a class="nav-link" href="#">Link 6</a>
      </div>
    </div>
  </div>
</nav>

navbar.js #

$(function(){
  $("#navbar").load("navbar.html", function() {
    // 加载完成后重新初始化折叠组件
    new bootstrap.Collapse(document.getElementById('navbarNavAltMarkup'), {
      toggle: false
    });
  });
});

index.html #

<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="dark">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
  <title>Demosite</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
  <div id="navbar"></div>
  <div class="container mt-5">
    <h1>Demo Home Page</h1>
    <p>Hello! Welcome to homepage.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <script src="navbar.js"></script>
</body>
</html>

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