Bootstrap折叠在其他打开时关闭div

Question

我为此感到挣扎。 单击所有按钮时，所有div都会打开和关闭。 但是，我要他们执行以下操作：如果一个div已打开，然后单击一个按钮以打开下一个div，那么我希望打开的一个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>

Answer 1

尝试以下

$('.collapse').on('show.bs.collapse', function () {
 $('.collapse').not($(this)).collapse('hide');
});

演示https://codepen.io/anon/pen/dMqVOY

Answer 2

将所有可折叠的div包装在父div中

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

然后将每个包装在面板div中

<div class="panel">

然后为每个切换按钮引用父级

parent="#accordion"

https://codepen.io/partypete25/pen/BKOwzZ