SOURCE

// 显示隐藏评论
    // $('.comment-box').hide()
    $('.comment-icon').click(function (){
        $(this).closest(".pop-box-item").find(".comment-box").toggle();
    })

    // 回复评论
    // $('.reply-btn').click(function (){
    function reply(id,cid){
        /*console.log(id)
        console.log(cid)*/
        let replyhtml = '<form action="" class="comment-form comment-form-reply">' +
            '<input type="text" class="hf-input" placeholder="说点什么···">' +
            '<button type="button" class="comment-btn"><i class="iconfont">&#xe714;</i></button>' +
            '</form>'
        if($(this).is('.reply-block')){
            $(this).removeClass('reply-block')
            $(this).parents('.review').append(replyhtml)
            $(this).parents('.comment-reply-text').siblings('.comment-form').find('.hf-input').val('').focus()
        }else{
            $(this).addClass('reply-block')
            $(this).parents('.comment-reply-text').siblings('.comment-form').remove()
        }
    }

    // 删除回复
    function del_reply(id){
        console.log(id)
        layui.use(['layer'], function (){
            layer.confirm('确认要删除？', {
                btn: [ '确定', '取消' ] //按钮
            })
        })
    }

<div class="comment-detail">
                            <div class="item">
                                <div class="flex">
                                    <img src="/static/index/userheader/478.jpg" class="avatar">
                                    <div class="text">
                                        <div class="user">开发人员一</div>
                                        <div class="time">2022-07-21 15:36:53</div>
                                    </div>
                                </div>
                                <div class="comment-info review">
                                    指每次对原评论的回复，就是和评论发布者的一次对话，这种对话本身也可分为一级、二级，乃至多级对话，分别是对评论者、评论回复者，回复评论回复者的人，以此类推。
                                    <div class="comment-reply-text flex flex-j-s-b">
                                        <div class="left">
                                            <span class="reply-btn reply-block" onclick="reply(5,6)">回复</span>
                                            <span class="del-reply-btn" onclick="del_reply('1')">删除</span>
                                        </div>
                                        <div class="">
                                            2022-07-21 15:36:53
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-reply-info">
                                    <div class="reply-item review">
                                        <div class="name"><span>奥巴马</span></div>
                                        <p>指每次对原评论的回复</p>
                                        <div class="comment-reply-text comment-reply-text2 flex flex-j-s-b">
                                            <div class="left">
                                                <span class="reply-btn reply-block" onclick="reply('2','3')">回复</span>
                                                <span class="del-reply-btn" onclick="del_reply('2')">删除</span>
                                            </div>
                                            <div class="">
                                                2022-07-21 15:36:53
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

.comment-icon-btn{}
.comment-icon-btn span{
    margin-right: 0.2rem;
    font-size: 0.26rem;
    line-height: 0.26rem;
}
.comment-icon i{
    font-size: 0.3rem;
    line-height: 0.26rem;
}
.comment-box{
    padding: 0.2rem;
    background: #f1f1f1;
    border-radius: 0.05rem;
}

.comment-form{
    position: relative;
}
.comment-form input{
    background: #FFF;
    padding: 0.2rem 1rem 0.2rem 0.2rem;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #FFF;
}
.comment-form input:focus{
    border: 1px solid #f67a47;
}
.comment-form .comment-btn{
    position: absolute;
    /*right: 0.2rem;
    top: 50%;
    transform: translate(0, -50%);*/
    right: 0;
    width: auto;
    z-index: 3;
    padding: 0.2rem;
    cursor: pointer;
}
.comment-form .comment-btn i{
    font-size: 0.4rem;
    color: #f67a47;
}
.comment-detail{
    margin-top: 0.3rem;
}
.comment-detail .item{
    padding-bottom: 0.25rem;
}
.comment-detail .item:nth-child(n+2){
    border-top: 1px solid #ddd;
    padding-top: 0.25rem;
}
.comment-detail .item img.avatar{
    width: 0.8rem;
    border-radius: 100%;
}
.comment-detail .item .text{
    margin-left: 0.2rem;
}
.comment-detail .item .text .user{
    font-size: 0.26rem;
}
.comment-detail .item .text .time{
    font-size: 0.24rem;
}
.comment-detail .item .comment-info{
    margin-left: 1rem;
    margin-top: 0.1rem;
}
.comment-detail .item .comment-info .comment-reply-text{
    /*color: #f67a47;*/
    margin-top: 0.15rem;
    font-size: 0.26rem;
}
.comment-detail .comment-reply-text span{
    margin-right: 0.2rem;
}
.comment-detail .comment-reply-text span:nth-child(1){
    color: #f67a47;
}
.comment-detail .comment-reply-text2{
    font-size: 0.25rem;
}

.comment-reply-btn{
    font-size: 0.24rem;
    padding-top: 0.1rem;
}
.comment-reply-btn .left span{
    margin-right: 0.2rem;
}
.comment-form-reply{
    /*margin: 0.15rem 0 0.35rem 0;*/
    margin-top: 0.1rem;
}
.comment-form-reply .hf-input{
    border: 1px solid #ddd;
}

.comment-detail .item .comment-reply-info{
    margin-left: 1rem;
    background: #FFF;
    padding: 0.25rem;
    border-radius: 0.05rem;
    margin-top: 0.25rem;
    position: relative;
    font-size: 0.26rem;
}
.comment-detail .item .comment-reply-info:before{
    content: "";
    width: 0px;
    height: 0px;
    border-left: 0.14rem solid transparent;
    border-right: 0.14rem solid transparent;
    border-bottom: 0.14rem solid #FFFFFF;
    position: absolute;
    top: -0.14rem;
    left: 0.15rem;
}
.comment-detail .item .reply-item{}
.comment-detail .item .reply-item:nth-child(n+2){
    margin-top: 0.15rem;
    padding-top: 0.15rem;
    border-top: 1px solid #ddd;
}
.comment-detail .item .reply-item .name{
    /*margin-bottom: 0.08rem;*/
}
.comment-detail .item .reply-item .name span{
    color: #f67a47;
}
.comment-detail .item .reply-item p{
    line-height: 0.34rem;
    margin: 0.12rem 0;
}