踏雾寻歌i 2021-07-11 15:07 采纳率: 50%
浏览 36
已采纳

怎么实现点击按钮下方出现一个评论框的样式，再点击一点样式消失

怎么实现点击按钮下方出现一个评论框的样式，再点击一点样式消失。

  • 写回答

1条回答 默认 最新

  • wanmeikakaxi 2021-07-11 16:07
    关注

    满意的话，记得采纳，谢谢。
    需要整个项目包的话，请私信我上传网盘。

    img

    img

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮下方出现一个评论框</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/comment.css">
</head>
<body>
<div class="commentAll">
    <!--评论区域 begin-->
    <div class="reviewArea clearfix">
        <textarea class="content comment-input" placeholder="请输入..." onkeyup="keyUP(this)"></textarea>
        <a href="javascript:;" class="lBtn">显示评论</a><a href="javascript:;" class="plBtn">评论</a>
    </div>
    <!--评论区域 end-->
    <!--回复区域 begin-->
    <div class="comment-show" style="display: none;">
        <div class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="#" alt="头像1"></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">您的昵称1: </a>
                    <span class="my-pl-con">这里是评论内容11111111111111111111</span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                        <span class="pull-left date-dz-line">|</span>
                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">111</i>)</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>
                <div class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="#" alt="头像2"></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">您的昵称2: </a>
                    <span class="my-pl-con">这里是评论内容22222222222222222222</span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                        <span class="pull-left date-dz-line">|</span>
                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">222</i>)</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>
            <div class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="#" alt="头像3"></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">您的昵称3: </a>
                    <span class="my-pl-con">这里是评论内容333333333333333333333333</span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">2021-7-11 15:31:39</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                        <span class="pull-left date-dz-line">|</span>
                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">333</i>)</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>
    </div>
    <!--回复区域 end-->
</div>
</body>
<script>
    var lbtn = document.getElementsByClassName('lBtn')[0];
    lbtnft = true;
    lbtn.onclick = function() {
     if(lbtnft == true){
      lbtn.innerText = "隐藏评论";
      document.getElementsByClassName('comment-show')[0].style.display="";
      lbtnft = false;

    }else if(lbtnft == false){
     lbtn.innerText = "显示评论";
     document.getElementsByClassName('comment-show')[0].style.display="none";
     lbtnft = true;
    }
    }
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已采纳回答 7月12日
  • 创建了问题 7月11日