个人中心项目--时间轴模块（二）

更新的内容：

这部分内容主要是对昨天的时间轴模块作了一点点前端的优化：


由上图可以看出，评论弹出界面相比昨天的美观许多，有昨天的弹出框便成了隐藏伸缩框，界面更加平滑。主要修改的前端代码部分如下：

<div class="col-lg-6">
    <div class="mb-4">
        <p>
            <button style="margin-right: 15px" class="btn btn-outline-danger ml-1 btn-rounded" type="button" data-toggle="collapse"
                    th:data-target="'#collapseExample'+${dynamics.dynamic.id}" aria-expanded="false"
                    th:aria-controls="collapseExample+${dynamics.dynamic.id}" th:text="${dynamics.likes.size()}+' Love'">
                Button with data-target
            </button>
            <button th:if="${dynamics.comments.size()} eq '0'" class="btn btn-outline-danger ml-1 btn-rounded" type="button"
                    th:text="${dynamics.comments.size()}+' comment'">
                Dropright
            </button>
            <button th:if="${dynamics.comments.size()} ne '0'" class="btn btn-outline-danger ml-1 btn-rounded" type="button" data-toggle="collapse"
                    th:data-target="'#collapseComment'+${dynamics.dynamic.id}" aria-expanded="false"
                    th:aria-controls="collapseComment+${dynamics.dynamic.id}" th:text="${dynamics.comments.size()}+' comment'">
                Dropright
            </button>

        </p>

        <div class="collapse" th:id="collapseExample+${dynamics.dynamic.id}">
            <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident.
            </div>
        </div>
        <div class="collapse" th:id="collapseComment+${dynamics.dynamic.id}">
            <div class="card card-body">
                <div th:each="comments:${dynamics.comments}" >
                    <div class="sl-left"> <img th:src="${session.user.headPic}" alt="user" class="rounded-circle" /> </div>
                    <div>
                        <p style="word-wrap: break-word;font-family: 华文行楷;font-size: large " th:text="${session.user.username}+' : '+${comments.content}">assign a new task</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

遇到的问题：

遇到的问题主要是一个，在点击评论框时，会显示隐藏的评论界面，但是我们这里是对多条评论遍历展示的，如果每条动态下按钮建绑定的隐藏div标签的id是一样的话，那么我们无论每次点击那一条动态的评论按钮，所有动态的隐藏评论框都会弹出。所以这里我选择通过thymeleaf给隐藏评论的div标签设置动态的id，这样，每条评论都可以控制自己的隐藏信息弹出与否。