1.效果图如下所示，

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

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

div class=' NR-comment ' div class=' NR-comment-con ' div class=' NR-comment-nav ' div class=' comment-number '跨度493/跨度跨度条评论/span/div class=' comment-sort '切换为时间排序/div/div class=' comment-content ' div class=' com-users ' div class=' comment-user ' span知乎用户/span div class='注释-用户-内容'这个爬虫真的好强大！/div/div class=' comment-time ' div 2017。10 .01 21:32:30/div button class=' BTN BTN-BTN小学-sm BTN-回复'回复/button/div/div class=' user-reply ' duv class=' reply-in '输入类型=' text '值=' name=' placeholder='请输入评论内容//dudiv class=' reply-button ' button type=' button ' class=' BTNBTN-BTN初选-评论BTN-sm '评论/button button type=' button ' class=' BTNBTN-默认BTN取消btn-sm '取消/button/div/div/class=' comment-content ' div class=' com-users ' div class=' comment-user ' span知乎用户/span div class='注释-用户-内容'这个爬虫真的好强大！/div/div class=' comment-time ' div 2017。10 .01 21:32:30/div button class=' BTN BTN-BTN小学-sm BTN-回复'回复/button/div/div class=' user-reply ' duv class=' reply-in '输入类型=' text '值=' name=' placeholder='请输入评论内容//dudiv class=' reply-button ' button type=' button ' class=' BTNBTN-BTN初选-评论BTN-sm '评论/button button type=' button ' class=' BTNBTN-默认BTN取消btn-sm '取消/button/div/div/class=' comment-content ' div class=' com-users ' div class=' comment-user ' span知乎用户/span div class='注释-用户-内容'这个爬虫真的好强大！/div/div class=' comment-time ' div 2017。10 .01 21:32:30/div button class=' BTN BTN-BTN小学-sm BTN-回复'回复/button/div/div class=' user-reply ' duv class=' reply-in '输入类型=' text '值=' name=' placeholder='请输入评论内容//dudiv class=' reply-button ' button type=' button ' class=' BTNBTN-BTN初选-评论BTN-sm '评论/button button type=' button ' class=' BTNBTN-默认BTN取消btn-sm '取消/button/div/div/class=' comment-content ' div class=' com-users ' div class=' comment-user ' span知乎用户/span div class='注释-用户-内容'这个爬虫真的好强大！/div/div class=' comment-time ' div 2017。10 .01 21:32:30/div button class=' BTN BTN-BTN小学-sm BTN-回复'回复/button/div/div class=' user-reply ' duv class=' reply-in '输入类型=' text '值=' name=' placeholder='请输入评论内容//dudiv class=' reply-button ' button type=' button ' class=' BTNBTN-BTN初选-sm BTN-评论'评论/button button type=' button ' class=' BTNBTN-默认' BTN-sm BTN-取消'取消/button/div/div/class=' comment-ipt '输入类型=' text '占位符='输入你的评论button type=' submit ' class=' BTN BTN-sm BTN-primary '评论/按钮/div/div3.css样式代码，样式无所谓，自己写就可以。NR-注释{宽度：100%；右边框：1px实心# A9A9A9边框-左侧：1px实心# A9A9A9}。NR-评论NR-comment-con { width :100%；}.NR-评论NR-comment-con . NR-comment-nav { width :100%；高度：40 px边框-底部：1px实心# F5F 5 F6；右边框：1px实心# A9A9A9边框-左侧：1px实心# A9A9A9背景色-: # 1e 8ce 0；}.NR-评论天然橡胶评论-con . NR-评论导航.注释号{ float:left宽度：85 px高度：30 px文本对齐：居中；页边距-顶部：5 px颜色：白色；线高：2.3 em}.NR-评论天然橡胶评论-con . NR-评论导航.注释-排序{ float : right宽度宽度：110px高度：30 px页边距-顶部：5 px右边距：10 px线高：2 em颜色：白色；}.NR-评论NR-comment-con.comment-content { width :100%；页边距-top :10 px；边框-底部：1px实心# a9 a9}.NR-评论天然橡胶评论-con.comment-内容.com-users { width :100%；最小高度：60 px}.NR-评论天然橡胶评论-con.comment-内容.com用户。注释-用户{ float:left宽度宽度：500像素高度：60 px}.NR-评论天然橡胶评论-con.comment-内容.com用户评论-用户span { color : black边距-左侧：10 px}.NR-评论天然橡胶评论-con.comment-内容.com用户。注释-用户。评论-用户-内容{宽度：90%；高度：60 px边距-左侧：10 px}.NR-评论天然橡胶评论-con.comment-内容.com用户。评论时间{浮动：右宽度宽度：190像素高度：60 px文本对齐：居中；color : # 9cadc 6 font-size :0.9 em；向右文本对齐：}.NR-评论天然橡胶评论-con.comment-内容.com用户注释-时间div { margin-right :15 px；}.NR-评论天然橡胶评论-con.comment-内容.com用户。评论时间BTN-回复{ margin-top :5 px；边界半径：4 pxborder:none背景-颜色： # 1bb 394颜色：白色；右边距：15 px}.NR-评论天然橡胶评论-con.comment-内容.用户回复{ display:none宽度：100%;高度：50 px}.NR-评论天然橡胶评论-con.comment-内容.用户回复。回复-在{ float :左侧；宽度：85%;高度：50 px}.NR-评论天然橡胶评论-con.comment-内容.用户回复。回复输入{宽度：100%；高度：30 px页边距-top :10 px；边距-左侧：10 px}.NR-评论天然橡胶评论-con.comment-内容.用户回复。回复按钮{ float : right margin-top :10 px；}.NR-评论天然橡胶评论-con.comment-内容.用户回复。回复按钮BTN-评论{ float : right右边距：14 px背景-颜色： # 1bb 394border:none颜色：白色；}.NR-评论天然橡胶评论-con.comment-内容.用户回复。回复按钮BTN取消{浮动：右右边距：10 px}.NR-评论NR-comment-con.comment-ipt { width :100%；高度：40 px边框-底部：1px实心# A9a 9；页边距-top :10 px；}.NR-评论NR-评论-con .评论-ipt输入{显示：块宽度：92%;高度：30 pxfloat : left font-size :14 px；边距-左侧：10 px}.NR-评论NR-评论-con .评论-ipt按钮{显示：块右浮动：背景-颜色： # 1bb 394颜色：白色；右边距：13 pxborder:none}4.js控制对应评论按钮事件。

脚本$(文档)。ready(function() {$(')).BTN-答复').单击(function(){//console。日志($(this)).index())；//获取回复按钮集合，getElementByClassNamevar m=document。getelementsbyclassname(' BTN-答复')；var n=文档。getelementsbyclassname(' user-reply ')；console.log('回复按钮集合m)；//获取回复按钮的索引定义变量索引=$('。BTN-答复').索引($(this))；console.log(索引);$('.用户回复')。eq(指数)。css('display '，' block ')；});$('.BTN取消')。单击(function(){ var m=document。getelementsbyclassname(' BTN-答复')；var n=文档。getelementsbyclassname(' user-reply ')；定义变量索引=$('。BTN取消')。索引($(this))；console.log(索引);$('.用户回复')。eq(指数)。css('display '，' none ')；});});/script总结

以上是边肖介绍的基于JavaScript扩展隐藏评论框的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！