在Bootstrap中默认关闭手风琴 [英] Make accordion closed by default in Bootstrap
问题描述
我正在使用Bootstrap手风琴.我希望所有面板默认关闭,但是我的面板开始展开.
I'm using Bootstrap Accordion. I want all the panel closed by default, but my panels are start expanded.
这是我的代码:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<c:forEach items="${proposals}" var="proposal" varStatus="serial">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading${proposal.propID}" >
<h4 class="panel-title">
<span class="fa fa-paperclip" aria-hidden="true"></span>
<a class="accordion-toggle collapsed"
data-toggle="collapse" data-parent="#accordion"
href="#collapse${proposal.propID}" aria-expanded="false"
aria-controls="collapse${proposal.propID}">
${proposal.title}
</a>
</h4>
</div>
<div id="collapse${proposal.propID}" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="heading${proposal.propID}">
${proposal.interest}
</div>
</div>
</c:forEach>
</div>
我还使用了 aria-expanded ="false"
,但是它不起作用.
I also used aria-expanded="false"
, but it doesn't work.
怎么了?
推荐答案
这行似乎是罪魁祸首:
<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ...
如果您在该类中摆脱了 in
,它应该按照您的结构进行工作.看一下这个例子,看看两个面板之间的区别:
If you get rid of in
in the class, it should work as you have it structured. Take a look at this example to see the difference between the two panels:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
This Panel is Open By Default
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Open
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
This Panel Is Closed By Default
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Closed
</div>
</div>
</div>
</div>
请注意,第一个面板的< a>
标记上没有 class = collapsed
,并且在其上具有 in
类它是< div>
标记,然后开始OPEN.第二个面板将其切换,然后开始关闭.
Notice the first panel doesn't have the class=collapsed
on it's <a>
tag, and has the in
class on it's <div>
tag, and starts OPEN. The second panel switches those, and starts CLOSED.
编辑
无法创建Bootply,不断出现应用程序错误".
Can't make a Bootply, keep getting "Application Error".
这篇关于在Bootstrap中默认关闭手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!