![](/img/trans.png)
[英]Bootstrap Collapse doesn't toggle after you show, hide or toggle from code
[英]Bootstrap Collapse toggle show/hide in 3 column WITHOUT an accordion
我有这个问题。 我需要使用js show&hide函数来执行Bootstrap手风琴功能的操作,但是我不能使用手风琴,因为我需要将按钮放在3列组中并且具有折叠功能才能完全折叠。 目前,当我切换一个时,它显示并隐藏了那个。 我需要它来显示当前的一个并隐藏其余的。 救命!
http://jsfiddle.net/Lowdl/pruggwqk/2/
<div class="itl">
<div class="container">
<div class="row">
<div class="col-md-4" id="accordion">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>
<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>
<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
</div>
</div>
</div>
<div id="collapseInvest" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>
</div>
<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
</div>
<div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
</div>
</div>
您需要分组。 那是你要的吗?
http://jsfiddle.net/alexqoliveira/pruggwqk/6/
<div class="col-md-4" >
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseInvest" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseInvest">Find out more</button>
</div>
<div class="col-md-4 green">
<button type="button" class="btnGreen" data-toggle="collapse" data-target="#collapseTrust" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseTrust">Find out more</button>
</div>
<div class="col-md-4">
<button type="button" class="btnRed" data-toggle="collapse" data-target="#collapseLead" data-parent="#accordion" aria-expanded="false" aria-controls="#collapseLead">Find out more</button>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div id="collapseInvest" class="collapse in">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</P>
</div>
<div id="collapseTrust" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
</div>
<div id="collapseLead" class="collapse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id dolor lorem. Phasellus a nisl sit amet est finibus tempor. Mauris sit amet massa sagittis, gravida tellus in, venenatis sem. Suspendisse efficitur efficitur varius. Cras euismod nisi ex, non lobortis risus dignissim vel.</p>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.