Spring Boot Thymeleaf：如何在文本中嵌入表达式实现独立折叠面板

你遇到的问题是因为Thymeleaf不会自动解析普通HTML属性中的${}表达式，必须使用Thymeleaf专属的属性语法来动态生成属性值。以下是两种可行的解决方案：

方案一：使用Thymeleaf前缀属性（推荐） #

直接给需要动态生成的属性加上th:前缀，在属性值中通过字符串拼接生成唯一标识：

<button class="accordion-button collapsed" type="button" 
        th:data-bs-toggle="collapse" 
        th:data-bs-target="'#collapse__' + ${task.id} + '__'" 
        aria-expanded="false" 
        th:aria-controls="'collapse__' + ${task.id} + '__'">
    <!-- 按钮文本 -->
</button>

<!-- 对应折叠面板的容器，id要和按钮的data-bs-target匹配 -->
<div th:id="'collapse__' + ${task.id} + '__'" class="collapse">
    <!-- 评论内容 -->
</div>

注：Kotlin中如果Task是data class，task.getId()可以简化为${task.id}。

方案二：启用属性内联（不推荐，仅作参考） #

如果坚持不想用th:前缀，可以在父元素上开启文本内联，然后用[[${}]]语法嵌入表达式：

<div th:inline="text">
    <button class="accordion-button collapsed" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#collapse__[[${task.id}]]__" 
            aria-expanded="false" 
            aria-controls="collapse__[[${task.id}]]__">
        <!-- 按钮文本 -->
    </button>

    <div id="collapse__[[${task.id}]]__" class="collapse">
        <!-- 评论内容 -->
    </div>
</div>

核心逻辑是确保每个任务的折叠按钮和对应面板拥有唯一的关联标识（绑定任务ID），这样点击单个按钮时只会展开对应任务的评论区域。

内容的提问来源于stack exchange，提问作者Almas Iskak