Bootstrap折叠手风琴没有响应

Question

我无法将一组Collapsable元素转换为Collapsable Accordion组。单独地，他们工作正常 - 但他们只是全部保持开放，并且在新的打开时不会崩溃。

我的代码是：

<div class="panel" id="list"> 

    <div class="clearfix" data-toggle="collapse" data-target="#detail" data-parent="#list" aria-expanded="true"> 
    <a><i class="fa fa-caret-down"></i> Accounts</a> 
    </div> 
    <div id="detail" class="collapse" aria-expanded="true" role="tabpanel"> 
    Lorem Ipsum 
    </div><!--COLLAPSE--> 

    <div class="clearfix" data-toggle="collapse" data-target="#detail1" data-parent="#list" aria-expanded="true"> 
    <a><i class="fa fa-caret-down"></i> Bookings</a> 
    </div> 
    <div id="detail1" class="collapse" aria-expanded="true" role="tabpanel"> 
    Lorem ipsum 
    </div><!--COLLAPSE--> 

</div> 

即使我已经加入data-parent="#list"他们仍然单独行为。有人会知道我做错了什么吗？

Answer 1

我发现这只是作品，如果我换每组我想在.panel类，如崩溃：

<div class="panel"> 
<div class="clearfix" data-toggle="collapse" data-target="#detail" data-parent="#list" aria-expanded="true"> 
    <a><i class="fa fa-caret-down"></i> Accounts</a> 
    </div> 
    <div id="detail" class="collapse" aria-expanded="true" role="tabpanel"> 
    Lorem Ipsum 
    </div><!--COLLAPSE--> 
</div> 

Answer 2

您可以使用引导手风琴取而代之的，是很容易的，试试这个：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
     Title #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     Body #1 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
     Title #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
     Body # 2 
     </div> 
    </div> 
    </div>