折叠（隐藏）页面1

效果图：
展开前：

2，展开后：

1，使用了 collapse

<div class="menu">
                                <span class="glyphicon glyphicon-thumbs-up icon"></span>
                                <span class="glyphicon glyphicon-comment icon" th:data-id="${comment.id}" onclick="collapseComment(this)"></span>
                                <span class="pull-right"
                                      th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd')}"></span>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse"
                                    th:id="${'comment-'+comment.id}">
                                二级评论
                            </div>

/*展开二级评论*/
function collapseComment(e) {
    var id=e.getAttribute("data-id");
    var  comments=$("#comment-"+id);

    //获取二级评论区的展开状态
    var collapse = e.getAttribute("data-collapse");
    if (collapse){
        //折叠
        comments.removeClass("in");
        e.removeAttribute("data-collapse");
        e.classList.remove("active");
    }else{
        //展开二级评论区
        comments.addClass("in");
        //标记二级评论展开状态
        e.setAttribute("data-collapse","in");
        e.classList.add("active");//添加属性标签！
    }
}

/*点击前后，对应的css的样式*/
.menu .active{
    color:#499ef3;
}