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

我有一个

HashMap

（称为

test

），格式如下：

HashMap

我想将

HashMap

值的项目显示为可展开的标题，您可以在标题下找到列表中每个对象的信息

我有以下代码，但我在扩展列表中看到的只是每个标题一行。实际上，列表中的项目被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>

键值
地名
第一点
第二点

---

我应该如何更正代码？

这是否符合您的要求

<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>

地名

我刚刚将bootstrap和jquery的verisons更新为最新版本，效果良好。我最后使用了以下几种：

<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和bootstrap非常陌生，我只使用复制和粘贴创建了这段代码：）。所以，如果你能更明确地向我解释你的目标，那就太好了：）。如何计算行的类值？