jquery 引导程序在其他div打开时折叠关闭div

mlnl4t2r 于 2022-12-03 发布在 jQuery

关注(0)|答案(2)|浏览(143)

我很纠结这个问题。当你点击它们的按钮时，所有的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>

jquery

来源：https://stackoverflow.com/questions/36857148/bootstrap-collapse-close-div-when-other-open

2条答案

按热度按时间

6kkfgxo01#

请尝试以下操作

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

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

赞(0）回复(0）举报 2022-12-03

wyyhbhjk2#

将所有可折叠div Package 在父div中

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

然后将每个控件 Package 在面板div中

<div class="panel">

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

parent="#accordion"

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

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 引导程序在其他div打开时折叠关闭div

2条答案

相关问题

热门标签

最新问答