04: 层级评论 - 爱码网

目录：抽屉项目之js最佳实践

返回顶部

　　　　功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
　　　　功能2：当鼠标滑过评论时会显示"回复"，点击进行回复
　　　　功能3：提交评论内容

04: 层级评论

返回顶部

　　1、功能1：点击"评"展示本帖子所有评论，生成一个评论发布框

<div class="post_container clearfix" post_id="18">
    <div class="row_container clearfix">
        <div class="left_container fl">
            <div class="post_content">文能一剪梅，武能嘿嘿嘿</div>
            <div class="post_bar">
                <a href="javascript:void(0);" class="like_btn" onclick="like(this,18)" like_count="1">已赞(1)</a>
                <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,18)">评(0)</a>
                <span>tom</span>
                <i>在 2018-01-07 09:51:29 发布</i>
            </div>
        </div>
        <div class="right_container fl">
            <img src="">
        </div>
    </div>
    <div class="comment_container">
        <div class="comment_text_container">
            <textarea class="comment_text">

            </textarea>
            <a class="send_btn" href="javascript:void(0)" onclick="post_comment(this,18)">发送</a>
        </div>
        <div class="comment_content_container">
            <ul>
                <li comment_id="25" display_name="tom" user_id="9">
                    <div class="comment_row">
                        <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                            我: 评论01　　2018-01-07 10:48:31
                            <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(25,this)">回复</a>
                        </div>
                        <div>

                        </div>
                    </div>
                    <ul>
                        <li comment_id="26" display_name="tom" user_id="9">
                            <div class="comment_row">
                                <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                                    我: 回复品论01　　2018-01-07 10:49:02
                                    <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(26,this)">回复</a>
                                </div>
                                <div>

                                </div>
                            </div>
                            <ul>

                            </ul>
                        </li>
                    </ul>
                </li>
                <li comment_id="27" display_name="tom" user_id="9">
                    <div class="comment_row">
                        <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                            我: 评论02　　2018-01-07 10:49:14
                            <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(27,this)">回复</a>
                        </div>
                        <div>

                        </div>
                    </div>
                    <ul>
                        <li comment_id="28" display_name="tom" user_id="9">
                            <div class="comment_row">
                                <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                                    我: 回复品论02　　2018-01-07 10:49:27
                                    <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(28,this)">回复</a>
                                </div>
                                <div>

                                </div>
                            </div>
                            <ul>

                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

生成展示帖子的HTML文件