1.效果图如下所示，

点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框

2.html代码：需要引入jQuery.js

<divclass="nr-comment"><divclass="nr-comment-con"><divclass="nr-comment-nav"><divclass="comment-number"><span>493</span><span>条评论</span></div><divclass="comment-sort">切换为时间排序</div></div><divclass="comment-content"><divclass="com-users"><divclass="comment-user"><span>知乎用户</span><divclass="comment-user-content">这个爬虫真的好强大！</div></div><divclass="comment-time"><div>2017.10.01 21:32:30</div><buttonclass="btn btn-primary btn-sm btn-reply">回复</button></div></div><divclass="user-reply"><duvclass="reply-in"><inputtype="text"value=""name=""placeholder="请输入评论内容" /></duv><divclass="reply-buttons"><buttontype="button"class="btn btn-primary btn-comment btn-sm">评论</button><buttontype="button"class="btn btn-default btn-cancel btn-sm">取消</button></div></div></div><divclass="comment-content"><divclass="com-users"><divclass="comment-user"><span>知乎用户</span><divclass="comment-user-content">这个爬虫真的好强大！</div></div><divclass="comment-time"><div>2017.10.01 21:32:30</div><buttonclass="btn btn-primary btn-sm btn-reply">回复</button></div></div><divclass="user-reply"><duvclass="reply-in"><inputtype="text"value=""name=""placeholder="请输入评论内容" /></duv><divclass="reply-buttons"><buttontype="button"class="btn btn-primary btn-comment btn-sm">评论</button><buttontype="button"class="btn btn-default btn-cancel btn-sm">取消</button></div></div></div><divclass="comment-content"><divclass="com-users"><divclass="comment-user"><span>知乎用户</span><divclass="comment-user-content">这个爬虫真的好强大！</div></div><divclass="comment-time"><div>2017.10.01 21:32:30</div><buttonclass="btn btn-primary btn-sm btn-reply">回复</button></div></div><divclass="user-reply"><duvclass="reply-in"><inputtype="text"value=""name=""placeholder="请输入评论内容" /></duv><divclass="reply-buttons"><buttontype="button"class="btn btn-primary btn-comment btn-sm">评论</button><buttontype="button"class="btn btn-default btn-cancel btn-sm">取消</button></div></div></div><divclass="comment-content"><divclass="com-users"><divclass="comment-user"><span>知乎用户</span><divclass="comment-user-content">这个爬虫真的好强大！</div></div><divclass="comment-time"><div>2017.10.01 21:32:30</div><buttonclass="btn btn-primary btn-sm btn-reply">回复</button></div></div><divclass="user-reply"><duvclass="reply-in"><inputtype="text"value=""name=""placeholder="请输入评论内容" /></duv><divclass="reply-buttons"><buttontype="button"class="btn btn-primary btn-sm btn-comment">评论</button><buttontype="button"class="btn btn-default btn-sm btn-cancel">取消</button></div></div></div><divclass="comment-ipt"><inputtype="text"placeholder="输入你的评论"><buttontype="submit"class="btn btn-sm btn-primary">评论</button></div></div></div>

3.css样式代码，样式无所谓，自己写就可以。

.nr-comment {width:100%;border-right:1px solid #A9A9A9;border-left:1px solid #A9A9A9;}.nr-comment .nr-comment-con {width:100%;}.nr-comment .nr-comment-con .nr-comment-nav {width:100%;height:40px;border-bottom:1px solid #F5F5F6;border-right:1px solid #A9A9A9;border-left:1px solid #A9A9A9;background-color:#1E8CE0;}.nr-comment .nr-comment-con .nr-comment-nav .comment-number {float:left;width:85px;height:30px;text-align:center;margin-top:5px;color:white;line-height:2.3em;}.nr-comment .nr-comment-con .nr-comment-nav .comment-sort {float:right;width:110px;height:30px;margin-top:5px;margin-right:10px;line-height:2em;color:white;}.nr-comment .nr-comment-con .comment-content {width:100%;margin-top:10px;border-bottom:1px solid #a9a9a9;}.nr-comment .nr-comment-con .comment-content .com-users {width:100%;min-height:60px;}.nr-comment .nr-comment-con .comment-content .com-users .comment-user {float:left;width:500px;height:60px;}.nr-comment .nr-comment-con .comment-content .com-users .comment-user span {color:black;margin-left:10px;}.nr-comment .nr-comment-con .comment-content .com-users .comment-user .comment-user-content {width:90%;height:60px;margin-left:10px;}.nr-comment .nr-comment-con .comment-content .com-users .comment-time {float:right;width:190px;height:60px;text-align:center;color:#9CADC6;font-size:0.9em;text-align:right;}.nr-comment .nr-comment-con .comment-content .com-users .comment-time div {margin-right:15px;}.nr-comment .nr-comment-con .comment-content .com-users .comment-time .btn-reply {margin-top:5px;border-radius:4px;border:none;background-color:#1BB394;color:white;margin-right:15px;}.nr-comment .nr-comment-con .comment-content .user-reply {display:none;width:100%;height:50px;}.nr-comment .nr-comment-con .comment-content .user-reply .reply-in {float:left;width:85%;height:50px;}.nr-comment .nr-comment-con .comment-content .user-reply .reply-in input {width:100%;height:30px;margin-top:10px;margin-left:10px;}.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons {float:right;margin-top:10px;}.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-comment {float:right;margin-right:14px;background-color:#1BB394;border:none;color:white;}.nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-cancel {float:right;margin-right:10px;}.nr-comment .nr-comment-con .comment-ipt {width:100%;height:40px;border-bottom:1px solid #A9A9A9;margin-top:10px;}.nr-comment .nr-comment-con .comment-ipt input {display:block;width:92%;height:30px;float:left;font-size:14px;margin-left:10px;}.nr-comment .nr-comment-con .comment-ipt button {display:block;float:right;background-color:#1BB394;color:white;margin-right:13px;border:none;}

4.js控制对应评论按钮事件。

<script>$(document).ready(function() {$('.btn-reply').click(function() {// console.log($(this).index());// 获取回复按钮集合,getElementByClassName;var m= document.getElementsByClassName("btn-reply");var n= document.getElementsByClassName("user-reply");console.log('回复按钮集合'+ m);// 获取回复按钮的索引var index= $(".btn-reply").index($(this));console.log(index);$(".user-reply").eq(index).css("display","block");});$('.btn-cancel').click(function() {var m= document.getElementsByClassName("btn-reply");var n= document.getElementsByClassName("user-reply");var index= $(".btn-cancel").index($(this));console.log(index);$(".user-reply").eq(index).css("display","none");});});</script>

总结

以上所述是小编给大家介绍的基于JavaScript实现评论框展开和隐藏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！