Bootstrap Collapse 功能依赖排查：手风琴按钮无法展开问题

核心问题 #

Bootstrap的手风琴折叠功能必须依赖JavaScript，你之前觉得无需JS是误解。data-toggle="collapse"、data-target这些属性都是Bootstrap JS组件来处理点击交互的，纯CSS只能控制折叠状态的显示/隐藏，根本做不了点击切换的逻辑。你删掉相关JS文件后，就没了触发折叠切换的核心逻辑，所以按钮点了没反应。

修复步骤 #

1. 恢复Bootstrap折叠组件的JS
   确保页面里引入了包含折叠组件的Bootstrap JS文件，比如本地引入打包好的版本：

   <script src="bootstrap.bundle.min.js"></script>
   

   （bundle版本已经包含了Popper依赖，不用额外引入）

2. 补全手风琴的外层容器
   你的HTML里写了data-parent="#accordion-1"，但没有对应的外层容器，这会导致手风琴没法实现“展开一个、关闭其他”的联动效果，补上即可：

   <div id="accordion-1">
     <div class="card">
       <div class="card-header py-4" id="heading-1-1" data-toggle="collapse" role="button" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
         <h6 class="mb-0"><i data-feather="file" class="mr-3"></i>Title</h6>
       </div>
       <div id="collapse-1-1" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
         <div class="card-body">
           <p>Text</p>
         </div>
       </div>
     </div>
     <!-- 其他手风琴项放在这个容器里 -->
   </div>
   

3. 可选：补充交互样式
   你当前的CSS只有基础显示样式，可加一点交互提示让用户知道该区域可点击：

   [data-toggle="collapse"] {
     cursor: pointer;
   }
   .card-header[data-toggle="collapse"]:hover {
     background-color: rgba(0,0,0,0.05);
   }
   

总结 #

别再以为Bootstrap折叠是纯CSS实现的，它的点击切换逻辑全靠JS组件。把对应的Bootstrap JS文件加回来，补全手风琴结构，问题就能解决。

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