Bootstrap 5.1.3导航栏折叠按钮功能异常：展开后无法重新折叠

嘿，我太懂这个坑了！你遇到的问题根源很明确——重复引入了Bootstrap的JavaScript文件，导致脚本冲突，才让折叠按钮只工作一次。

问题出在哪？ #

bootstrap.bundle.min.js已经内置了Popper.js和Bootstrap的核心JS功能，你之后又单独引入了popper.min.js和bootstrap.min.js，相当于加载了两遍Bootstrap的JS逻辑。两个JS实例互相干扰，折叠状态的切换逻辑就乱掉了，自然没法二次折叠。

修复步骤超简单 #

只需要保留bootstrap.bundle.min.js这一个脚本引用就行，另外两个多余的脚本直接删掉——它已经包含了所有你需要的依赖。

修正后的完整代码 #

<!-- CSS Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 只保留这一个脚本，它整合了Popper和Bootstrap核心JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #95D1CC;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Simon Game</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="CSS-My Site/about_index.html">About Developer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Instructions/instructions_index.html">Instructions</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

改完之后刷新页面，折叠按钮就能正常展开和收起啦！

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