Question

你好，我在网站上的打印对象有问题。我有一个来自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>

Answer 1

您在块内使用的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>

Bootstrap手风琴使用th：block折叠

1 个答案: