多级评论回复功能（纯前端，未连数据库）

最新推荐文章于 2024-08-17 17:20:04 发布

Jiang酱~

最新推荐文章于 2024-08-17 17:20:04 发布

阅读量7.3k

点赞数 12

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_40758850/article/details/90748800

版权

本文介绍如何在纯前端环境中实现多级评论回复功能，包括效果图展示、HTML结构及JavaScript实现，未涉及数据库连接。

摘要由CSDN通过智能技术生成

效果图：

在这里插入图片描述

html结构（css我就不放了）：

 <div>
    <!--我的评论-->
     <div class="my-comment">
         <textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="快来说点什么吧~"></textarea>
         <div class="self-info">
             <div class="username">
                 <div class="mytx-box">
                     <img class="mytx" src="img/03.jpg" alt="">
                 </div>
                 <span class="myname">啦啦啦</span>
             </div>
             <div class="comment-btn">发表评论</div>
         </div>
     </div>
     <!--总评论展示区-->
     <div class="show-comments-area">
         <ul id="commentsList" class="comment-lists">
    		  <!--li-->
             <li class="comment-list-item">
                 <div class="user-tx">
                     <img class="mytx" src="img/00.jpg" alt="">
                 </div>
                 <div class="comment-content">
                     <div class="user-name">升职加薪</div>
                     <div class="user-comment">哈哈哈哈</div>
                     <div class="thumbs-up">
                         <img src="img/赞(2).png" alt="">
                         <img class="none" src="img/赞(3).png" alt="">
                     </div>
                     <div class="replay">
                         <img src="img/回复.png" alt="">
                     </div>
                     <div class="replay-area none">
                         <textarea class="replay-textarea" placeholder="快来说点什么吧~"></textarea