javascript - 当其他打开时 Bootstrap Collapse 关闭 div

Question

我正在为此苦苦挣扎。当您单击按钮时，所有 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