我有两个可折叠的div A(collapseOne)和B(collapseTwo),它们基于Twitter的引导程序。当 B 展开时如何使 A 折叠,反之亦然?
我的代码如下所示,
<div class="shop-details" id="shop-accordion">
<div id="collapseOne" class="shop-brief clearfix collapse hide">
<h2 class="yahei ft30">MyName</h2>
<span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"><i class="path-down"></i>Show details</a></span>
</div>
<dl id="collapseTwo" class="shop-ds clearfix collapse in">
<dt>
<a href="#" target="_parent"><img src="images/pt-small.jpg" width="246" height="169"></a>
<div class="shop-ds-txt">
<h2 class="yahei ft30">MyName</h2>
<ul class="shop-ds-ul">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div>
</dt>
<dd>
<div class="unfold-positon">
<div><span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"><i class="path-up"></i>Show brief</a></span></div>
</div>
</dd>
</dl>
</div>
我想div collapseOne
是隐藏的,默认情况下collapseTwo
可见。单击链接Show brief
后,将collapseTwo
隐藏并显示collapseOne
。
只需使用他们在文档中提供的示例即可。 我在这里为您简化了它, 确保你所有的div都有相同的data-parent
,以便充当手风琴.
<div class="accordion" id="my-accordion">
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne">
Toggle 1
</a>
<div id="collapseOne" class="accordion-body in" style="height: auto; ">
<div class="accordion-inner">
Inner content 1
</div>
</div>
</div>
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordian" href="#collapseTwo">
Toggle 2
</a>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Inner content 2
</div>
</div>
</div>
</div>