我正在使用Bootstrap Accordion。我希望所有面板默认关闭,但我的面板开始展开。
这是我的代码:
<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"
,但它不起作用。
有什么错误吗?
3条答案
按热度按时间kcrjzv8t1#
这一行在这里似乎是罪魁祸首:
如果你去掉了类中的
in
,它应该像你构造的那样工作。看看这个例子,看看两个面板之间的区别:注意,第一个面板的
<a>
标签上没有class=collapsed
,而<div>
标签上有in
类,并启动OPEN。第二个面板切换这些标签,并启动CLOSED。编辑
无法进行Bootply,不断出现“应用程序错误”。
iqxoj9l92#
我最近在使用Bootstrap 4,但实际上无法找出“in”类名在哪里(在类似问题的多个答案中提到了它)。
经过大量搜索后,注意到更新的文档如下所示:
collapse插件使用几个类来处理繁重的工作:
.collapse隐藏内容
. collapse.show显示的内容
.在转场开始时添加折叠,在转场结束时删除
因此,示例代码现在看起来如下所示:
由此可见,这是很重要的一点:
删除“show”类名可确保 Bootstrap 折叠面板在默认情况下保持折叠状态。
希望这对你有帮助!
xn1cxnb43#
你所需要做的就是删除show类中的body内容,它将默认关闭。