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

Question

我正在为此苦苦挣扎。当您单击它们的按钮时，所有 div 都会打开和关闭。但我希望他们做的是：如果一个 div 打开，我单击一个按钮打开下一个，我希望打开的关闭，如果有意义的话，打开新的。这是代码的 link：

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

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

Bootstrap Collapse close div when other open

javascript

jquery

twitter-bootstrap

collapse