Bootstrap手風琴使用th：block折疊

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>