[英]Bootstrap Accordion - Toggle all nested elements
我在頁面上有很多嵌套的bootstrap可折疊元素。 例如http://jsfiddle.net/JPgLT/7/
如何設置鏈接以僅在父元素內切換所有元素?
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<a href="#collapse-764" data-parent="#collapsible-" class="accordion-toggle" data-toggle="collapse">Headline 1</a>
</h2>
</div>
<div id="collapse-764" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="csc-firstHeader panel-title">
<a href="#collapse-765" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.1</a>
</h2>
</div>
<div id="collapse-765" class="panel-collapse collapse">
<div class="panel-body">
<p>Text 1.1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<a href="#collapse-766" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.2</a>
</h2>
</div>
<div id="collapse-766" class="panel-collapse collapse">
<div class="panel-body">
<p>Text 1.2</p>
</div>
</div>
</div>
</div>
</div>
</div>
您可以在按鈕上添加一個特殊的closeall
類,然后使用jQuery切換折疊狀態。
$('.closeall').click(function(){
$(this).parents('.panel-heading') // find the parent heading element
.next('.panel-collapse') // find the next collapse element
.collapse('show') // make sure it's open
.find('.panel-collapse') // find inner collapse elements
.collapse('toggle'); // toggle their state
});
演示: http : //bootply.com/117082
我想我對您的問題的理解有所不同,並且我知道您已經排除了答案,但是我想我還是會回答,因為我對jQuery很陌生,希望您能提供反饋
$el = $(".accordian-toggle").first(); //Use whatever selector you have to to select the parent element
$el.click(); //expand/toggle that element
//then use that elements href attribute as the selector to find all toggleable 'child' elements
$($el.attr('href')).find(".accordion-toggle").each(function(){
$(this).click();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.