Question

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

<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>

Answer 1

使用此$(document).ready(function(){ $("#overflow-scroll").scroll(function(){ var scrollRight = 200; //200 pixels if($("#overflow-scroll").scrollLeft() > scrollRight){ //show block 2 and hide block1 text $(".block1").hide(); $(".block2").show(); }else{ $(".block1").show(); $(".block2").hide(); } }) })代码：

Javascript

它会将侦听器添加到链接元素的$('#accordion a').click( function(e) { $('.collapse').collapse('hide'); });事件中，并在打开所单击的项目之前将其全部折叠。

Answer 2

使用这个小提琴

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

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

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

2 个答案: