Bootstrap手风琴异常：关闭单个面板时其他面板同步关闭

问题根源 #

你遇到的问题是因为所有折叠面板共用了同一个data-bs-parent属性，这个属性的作用是将多个折叠面板归为同一手风琴组，同一组内只能同时展开一个面板，所以操作单个面板时会触发其他面板同步关闭。

修复步骤 #

1. 移除统一的data-bs-parent属性
   检查每个折叠面板的触发按钮（通常是<button>或<a>标签），删掉data-bs-parent="#xxx"这类属性。这样每个面板就会变成独立的可折叠单元，互不影响。

   错误示例（带联动的结构）：

   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel1" data-bs-parent="#accordionGroup">
     面板1标题
   </button>
   <div class="accordion-collapse collapse show" id="panel1">
     面板1内容
   </div>
   
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel2" data-bs-parent="#accordionGroup">
     面板2标题
   </button>
   <div class="accordion-collapse collapse show" id="panel2">
     面板2内容
   </div>
   

   修正后（独立面板结构）：

   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel1">
     面板1标题
   </button>
   <div class="accordion-collapse collapse show" id="panel1">
     面板1内容
   </div>
   
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panel2">
     面板2标题
   </button>
   <div class="accordion-collapse collapse show" id="panel2">
     面板2内容
   </div>
   

2. 保留初始展开状态
   继续给每个折叠面板的内容容器保留show类，确保页面加载时所有面板默认处于展开状态。

3. 可选：适配样式细节
   移除data-bs-parent后，若面板标题按钮的展开/收起箭头样式异常，可手动控制按钮的collapsed类：

   • 初始展开状态下，按钮无需添加collapsed类
   • 面板收起时，Bootstrap会自动给按钮加上collapsed类，同步切换箭头方向

验证效果 #

修改后测试：关闭任意面板再重新打开，其他面板的状态不会被干扰，所有面板均可独立手动开关。

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