[英]Bootstrap accordion collapse with th:block
您好,我在网站上的打印对象有问题。 我有一个来自DB的数据包,我想将它们打印到Accordion折叠中(例如Boostrap上的示例)。 现在,我在网站上打开了所有对象或任何对象。
<div id="accordion">
<th:block th:each="packet: ${packet}">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse" aria-controls="collapse" th:text="${packet.name}">
</button>
</h5>
</div>
<div id="collapse" class="collapse show" aria-labelledby="heading" data-parent="#accordion">
<div class="card-body" th:text="${packet.description}">
</div>
</div>
</div>
</th:block>
</div>
您在块内使用的css类存在问题。 使用show
只显示你想要的牌,你必须使用collapsed
在里面的按钮倒塌卡。 以下代码将显示所有折叠的项目:
<div id="accordion">
<th:block th:each="packet: ${packet}">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse" aria-controls="collapse" th:text="${packet.name}">
</button>
</h5>
</div>
<div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#accordion">
<div class="card-body" th:text="${packet.description}">
</div>
</div>
</div>
</th:block>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.