我正在使用 twitter 引导 css 和 js 框架。在这个例子中，我有四个可折叠的 div。
当我打开一个 div 然后我单击展开所有按钮然后自动打开的 div 正在关闭。
我想显示所有 div 的方式可以一次扩展。
例如，如果打开#about 并且用户单击展开所有按钮，那么它必须显示所有包括#about 在内的所有内容。
是否有捷径可寻？
这是代码： -
<section id="accordion">
<a href="#_" class="expandcollapse btn btn-mini btn-primary pull-right" state="0"><i class='icon-white icon-plus-sign'></i> Expand All</a>
<ul class="nav nav-tabs" id="tabFAQ">
<li class="active"><a href="#GQ" data-toggle="tab" state="0">Subscriptions</a></li>
</ul>
<div class="tab-content" id="faqContent">
<div class="tab-pane active" id="GQ">
<div class="accordion" id="generalQuestions">
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Tactial">
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category1">5.11 Tactial<i class="icon-ok-sign success-color"></i>
</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" rel="tooltip" data-placement="right" href="#">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category1" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category1" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Women">
<a href="">Women</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Customer-Is-Anonymous">
<a href="">Men</a>
</li>
</ul>
</div><!--/Apparel End-->
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Juary" class="regular-checkbox"><label for="Juary"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category2">Juary</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category2" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category2" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Furniture">
<a href=""> Furniture (Subscribed) </a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Accessories">
<a href="">Home Accessories</a>
</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Dickies" class="regular-checkbox"><label for="Dickies"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category3">Dickies</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category3" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category3" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Shoe">
<a href="">Shoe</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Swaters">
<a href="">Swaters</a>
</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Puma" class="regular-checkbox"><label for="Puma"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category4">Puma</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category4" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category4" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Appearel">
<a href="">Appearel</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Sports">
<a href=""> Sports</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Spickes">
<a href=""> Red Spickes Shoe</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Soccer">
<a href=""> Soccer Shoe</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
//collapsible menu
$('#tabFAQ a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('.expandcollapse').click(function() {
var newstate = $(this).attr('state') ^ 1,
icon = newstate ? "minus" : "plus",
text = newstate ? "Collapse" : "Expand";
$('.nav-tabs').children().each(function(index) {
if($(this).hasClass('active')) {
var tab = $(this).children(':first');
toggleTab(tab.prop('hash'));
tab.attr('state',newstate);
}
});
$(this).html("<i class=\"icon-white icon-" + icon + "-sign\"></i> " + text +" All");
$(this).attr('state',newstate)
});
$('a[data-toggle="tab"]').on('shown', function (e) {
var myState = $(this).attr('state'),
state = $('.expandcollapse').attr('state');
if(myState != state) {
toggleTab($(this).prop('hash'));
$(this).attr('state',state);
}
})
function toggleTab(id){
$(id).find('.collapse').each(function() {
$(this).collapse('toggle');
});
}