如何设置在其他 div 项打开时折叠其他 div 项答案

【问题标题】：How to set to collapse other div item when other one is open如何设置在其他 div 项打开时折叠其他 div 项
【发布时间】：2023-04-07 02:21:01
【问题描述】：

我尝试了各种方法，但没有奏效。我正在尝试的是一次只打开一个 div 请打开上面的链接进行检查
请提出任何替代或建议

JsFiddle：http://jsfiddle.net/gm2k3ewp/

<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>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      <div id="collapse1" class="col-md-3 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>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      </div>
      <div id="collapse2" class="col-md-3 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>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      </div>
      <div id="collapse3" class="col-md-3 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>

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

使用这个小提琴

在这里我添加了面板默认类。

'http://jsfiddle.net/gm2k3ewp/1/'

【讨论】：

【解决方案2】：

使用此Javascript 代码：

$('#accordion a').click( function(e) {
    $('.collapse').collapse('hide');
});

它将侦听器添加到链接元素的click 事件中，并在打开单击的项目之前将其全部折叠。

【讨论】：

非常感谢它的工作
对不起@KrishnaChaitanyaKollu，我还为葡萄牙语 SO 社区做出了贡献，并用葡萄牙语回答了这个问题。修好了:)