我正在使用twitter bootstrap css和js框架。在这个例子中，我有四个可折叠的div。
当我打开一个div然后我点击展开全部按钮然后自动打开的div正在关闭。
我想展示所有div的方式可以一次扩展。
E.g。如果打开#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');
});
}
答案 0 :(得分：1)
关键是使用树遍历来查找相关的折叠式div，然后折叠仅扩展的那些（或根据您的“状态”标志显示折叠的那些）
请参阅http://jsfiddle.net/jhfrench/mc4Qd/，了解您正在尝试做的工作示例。
一些注意事项：
我写的解决方案是可重用的，这样你就可以有多个 包含与之交互的展开/折叠按钮的部分 该部分内的手风琴（或div，如第3块）：
$(this).siblings('div').find( ...
我们不想无差别地显示所有div.accordion-body，因为这会（重新）动画已经显示的块。 JQuery的“not selector”（:not(.in)）可以解决问题：
find('div.accordion-body:not(.in)').collapse('show');
我们不想随意隐藏所有div.accordion-body，因为这会（重新）动画已经隐藏的块。因此，我们将查找同时为.accordion-body 和 .in（'div.accordion-body.in'的div;请向Sasha Chedygov寻求帮助）：
find('div.accordion-body.in').collapse('hide');
答案 1 :(得分：0)
试试这个：http://www.bootply.com/peFUdnwOpZ 它应该有助于你所寻找的东西。