如何实现打开一个div时自动收起其他div？求解决方案

嘿，我检查了你的代码，发现问题出在没遵循Bootstrap手风琴组件的结构要求——它需要每个折叠组都被包裹在.panel容器内，触发按钮和折叠内容得属于同一个.panel，这样data-parent属性才能正确关联，实现互斥折叠的效果。你的当前结构缺少这些必要容器，所以“只能打开一个面板”的功能没生效。

下面是修改后的完整代码，既修复了结构问题，又保留了你的布局需求：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-group row" id="accordion">
    <!-- 第一个折叠项 -->
    <div class="panel panel-default col-md-6">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <img src="http://via.placeholder.com/350x150">
        </a>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <!-- 第二个折叠项 -->
    <div class="panel panel-default col-md-6">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <img src="http://via.placeholder.com/350x150">
        </a>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>

    <!-- 第三个折叠项 -->
    <div class="panel panel-default col-md-6">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
          <img src="http://via.placeholder.com/350x150">
        </a>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>
</div>

关键修改点说明： #

• 给每个折叠项添加了.panel panel-default容器，把触发图片和折叠内容放在同一个面板内，这是Bootstrap手风琴生效的核心结构要求
• 调整了网格类（比如col-md-6）适配面板容器，保证排版整齐（你可以根据需求调整网格尺寸）
• 保留了data-parent="#accordion"属性，确保点击任意一个折叠面板时，其他已打开的面板会自动关闭

这样修改后，就能实现你想要的“仅同时打开一个div”的手风琴效果了。

内容的提问来源于stack exchange，提问作者Krishna Chaitanya Kollu