我正在努力解决这个问题。单击按钮时，所有div都会打开和关闭。但是我希望他们做的是以下内容：如果一个div打开，我单击一个按钮打开下一个我希望打开一个关闭，如果有意义则打开新的一个。这是代码的链接：
https://codepen.io/iamdesfranco/pen/QNVqLO
<div class="container-fluid hidden-xs">
<div class="row blue">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Personal Involvement</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aPInvolveD" aria-expanded="false" aria-controls="aPInvolveD" >
See More
</a>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
</div>
</div>
<!-- ALL ACCORDIONS FOR DESKTOP AND TABLET
=========================================== -->
<!-- ACCORDION 1 -->
<div class="collapse blue" id="aPInvolveD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 2 -->
<div class="collapse blue " id="aClientD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 3 -->
<div class="collapse blue " id="aTestD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ROW TWO
==============-->
<div class="container-fluid blue hidden-xs">
<div class="row">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Our Clients</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aClientD" aria-expanded="false" aria-controls="aClientD">
See More
</a>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Testimonials</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aTestD" aria-expanded="false" aria-controls="aTestD">
See More
</a>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
尝试以下
$('.collapse').on('show.bs.collapse', function () {
$('.collapse').not($(this)).collapse('hide');
});
答案 1 :(得分：0)
在父div中包装所有可折叠的div
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
然后将每个人包裹在一个面板div
中<div class="panel">
然后引用每个切换按钮的父级
parent="#accordion"