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

默认情况下没有完成，但绑定到collapse事件并使用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

如何在单击下一个手风琴项目时将其关闭

1 个答案: