如何使用 thymeleaf 实现列表的折叠和扩展？

Question

我有一个 HashMap（称为 test），格式如下：HashMap<String,List<MyClass>>.

我想将 HashMap 值的项目显示为可展开的标题，您可以在该标题下找到列表中每个 object 的信息。

我有以下代码，但我在扩展列表中看到的是每个标题只有一行。实际上，列表的项目被 for 循环中的下一个项目覆盖。

<tbody>
  <tr th:each="element, iterStat  : ${test}">
    <td data-toggle="collapse" th:attr="data-target=|#demo${iterStat.count}|" th:text="${element.key}">keyvalue</td>

    <tr class="accordian-body collapse" th:id="'demo' + ${iterStat.count}" th:each="anews : ${element.value}">
      <td th:text="''">Place name</td>
      <td th:text="${anews.first_point}">First point</td>
      <td th:text="${anews.second_point}">Second point</td>
    </tr>
  </tr>
</tbody>

我应该如何更正我的代码？

Answer 1

这是否符合您的要求？

<tbody>
    <th:block th:each="element, iterStat  : ${test}">
        <tr>
            <td colspan="3" data-toggle="collapse" th:data-target="|.demo${iterStat.count}|" th:text="${element.key}" />
        </tr>

        <tr th:class="|accordian-body collapse demo${iterStat.count}|" th:each="anews : ${element.value}">
            <td th:text="''">Place name</td>
            <td th:text="${anews.first_point}" />
            <td th:text="${anews.second_point}" />
        </tr>
    </th:block>
</tbody>

Answer 2

我刚刚将 bootstrap 和 jquery 的版本更新到最新版本并且它有效。我最终使用了以下的：

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

如何使用 thymeleaf 实现列表的折叠和扩展？

How to implement collapsing and expanding of a list using thymeleaf?

html

collapse

thymeleaf