[英]Bootstrap Collapse Accordion not responding
我很難將一組可折疊元素轉換為可折疊手風琴組。 單獨地,它們工作良好-但它們都保持打開狀態,並且在打開新的視圖時不會崩潰。
我的代碼是:
<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"
它們仍然分別表現。 有人知道我做錯了嗎?
您可以改用bootstrap手風琴,真的很簡單,請嘗試以下操作:
<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>
我發現這僅在將每個要折疊的組包裝到.panel
類中.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.