Bootstrap折叠导航栏切换按钮仅能打开无法关闭求助

你的问题出在JS资源的重复引入和冲突上，和jQuery的加载顺序无关，具体原因及修复方案如下：

核心问题分析 #

1. 重复加载Bootstrap JS：你同时引入了bootstrap.min.js和bootstrap.bundle.min.js，后者已经包含了完整的Bootstrap核心功能+Popper.js，重复加载会导致折叠组件的状态绑定逻辑混乱，按钮只能触发打开操作，无法触发关闭。
2. 多余的Popper.js引入：bootstrap.bundle.min.js已经内置了适配Bootstrap的Popper版本，额外加载独立的Popper.js会造成版本冲突，破坏折叠组件的状态切换机制。
3. Bootstrap 5无需jQuery：Bootstrap 5已经完全移除了对jQuery的依赖，虽然兼容jQuery，但引入jQuery和jQuery UI可能会干扰Bootstrap原生的事件监听逻辑。

修复步骤 #

1. 删除bootstrap.min.js的引入代码
2. 删除独立的popper.min.js引入代码
3. （可选）如果页面没有用到jQuery和jQuery UI的其他功能，建议一并删除它们的引入，减少潜在冲突

修复后的完整头部资源代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">

<!-- 仅保留需要的jQuery（如果页面依赖的话），否则可以删除 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- 只保留bundle版本的Bootstrap JS -->
<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/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

验证方法 #

修改后刷新页面，点击导航栏切换按钮，就能正常实现打开/关闭的双向切换了。

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