当您点击下一个手风琴项目时，您如何关闭上一个手风琴项目

Question

由于某些原因，我以前的手风琴项目在点击下一个项目时不会自动关闭。我认为这是默认完成的。

这里是我的HTML：

<div class="container top-section"> 
<div class="row"> 
    <div class="col-md-8"> 
     <div class="col-md-9 homewelcome"> 
     <div id="accordian"> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
    contentone 
</div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
    contenttwo 
</div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
    contentthree 
</div> 
     </div> 
     </div> 

    <div class="col-md-3 remove-padding"> 
     <ul class="reset-list colour-options"> 
      <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion" title="Young Carer"><li class="blue first-blue">Young Carer</li></a> 
      <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion" title="What we do"><li class="pink first-pink">What we do</li></a> 
      <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion" title="Info for families"><li class="blue blue-second">Info for<br>families</li></a> 
      <a href="/" title="Info for professionals" data-toggle="collapse" data-parent="#accordion"><li class="pink pink-second">Info for<br>professionals</li></a> 
     </ul> 
    </div> 
</div> 

Answer 1

它不是默认设置，但结合倒塌事件和隐藏使用jQuery会做的伎俩可折叠元素的其余部分。见Boostrap javascript docs

var $topSection = $('.top-section'); 
$topSection.on('show.bs.collapse','.collapse', function() { 
    $topSection.find('.collapse.in').collapse('hide'); 
}); 

Bootply
http://www.bootply.com/Kg6K0W7rJg