Bootstrap 5折叠组件二次点击无法收回问题求助

问题出在你重复引入了多组相同类型的Bootstrap资源，导致JavaScript组件初始化冲突，引发交互异常。

重复引入的问题点： #

• CSS文件：同时引入了bootstrap.css和bootstrap.min.css（二者为同一文件的未压缩/压缩版本，只需保留一个）
• jQuery文件：同时引入了jquery.min.js和jquery.js（同理，二选一即可）
• Bootstrap JS文件：同时引入了bootstrap.js和bootstrap.bundle.min.js（bootstrap.bundle.min.js已包含Popper.js，与bootstrap.js同时引入会导致组件逻辑冲突）

正确的资源引入方式 #

方式1：不依赖jQuery（Bootstrap 5推荐）

<!-- 引入压缩版Bootstrap CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- 引入包含Popper的Bootstrap Bundle JS -->
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

方式2：依赖jQuery（若项目必须使用）

<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- 先引入jQuery压缩版 -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- 引入Bootstrap JS压缩版 -->
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

你的HTML结构本身是正确的，修复资源引入重复的问题后，Collapse组件就能正常实现点击显示/隐藏的交互。

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