Bootstrap 4 Collapse data-parent失效：点击图片无法关闭已开面板

嘿，我看你遇到的问题是点击图片触发折叠面板时，没法自动关闭已经打开的面板，新面板直接堆在旧的上面对吧？这其实是因为你没满足Bootstrap 4手风琴模式的结构要求，我来给你拆解清楚：

问题根源 #

Bootstrap 4的data-parent属性要实现互斥折叠（手风琴效果），有两个关键前提：

• 所有需要互相控制的折叠面板（.collapse元素）必须被包裹在你设置data-parent="#keystones"的那个父容器里
• 每个折叠面板必须是card组件的一部分——具体来说，.collapse元素得是.card的直接子元素，Bootstrap的手风琴逻辑是和card组件绑定的，它只会识别父容器下属于card的折叠面板

你的代码里应该是折叠面板没有放在card结构中，所以data-parent没法正确触发互斥关闭的逻辑。

修复方案 #

调整HTML结构，把每个折叠面板放进card组件里，同时确保触发元素的data-parent指向正确的父容器。这里给你改好的示例结构：

<div id="keystones">
  <!-- 第一个触发图片 + 对应折叠面板 -->
  <img src="http://via.placeholder.com/100x100" data-toggle="collapse" data-target="#8005" data-parent="#keystones" class="mb-2">
  
  <div class="card">
    <div id="8005" class="collapse">
      <div class="card-body">
        这里是8005面板的内容
      </div>
    </div>
  </div>

  <!-- 第二个触发图片 + 对应折叠面板 -->
  <img src="http://via.placeholder.com/100x100" data-toggle="collapse" data-target="#8008" data-parent="#keystones" class="mb-2">
  
  <div class="card">
    <div id="8008" class="collapse">
      <div class="card-body">
        这里是8008面板的内容
      </div>
    </div>
  </div>
</div>

额外小提示 #

如果不想用card的默认样式，完全可以自定义CSS覆盖card和card-body的边框、内边距等属性，不会影响手风琴的功能逻辑。

这样调整后，点击不同的图片，就会自动关闭之前打开的面板，只显示当前触发的那个啦！

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