js实现评论框展开和隐藏

1.效果图如下所示，

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

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

< div class = "nr-comment" >

< div class = "nr-comment-con" >

< div class = "nr-comment-nav" >

< div class = "comment-number" >

< span > 493 </ span >

< span > 条评论 </ span >

</ div >

< div class = "comment-sort" >

切换为时间排序

</ div >

</ div >

< div class = "comment-content" >

< div class = "com-users" >

< div class = "comment-user" >

< span > 知乎用户 </ span >

< div class = "comment-user-content" >

这个爬虫真的好强大！

</ div >

</ div >

< div class = "comment-time" >

< div > 2017.10.01 21:32:30 </ div >

< button class = "btn btn-primary btn-sm btn-reply" > 回复 </ button >

</ div >

</ div >

< div class = "user-reply" >

< duv class = "reply-in" >

< input type = "text" value = "" name = "" placeholder = "请输入评论内容" />

</ duv >

< div class = "reply-buttons" >

< button type = "button" class = "btn btn-primary btn-comment btn-sm" > 评论 </ button >

< button type = "button" class = "btn btn-default btn-cancel btn-sm" > 取消 </ button >

</ div >

</ div >

</ div >

< div class = "comment-content" >

< div class = "com-users" >

< div class = "comment-user" >

< span > 知乎用户 </ span >

< div class = "comment-user-content" >

这个爬虫真的好强大！

</ div >

</ div >

< div class = "comment-time" >

< div > 2017.10.01 21:32:30 </ div >

< button class = "btn btn-primary btn-sm btn-reply" > 回复 </ button >

</ div >

</ div >

< div class = "user-reply" >

< duv class = "reply-in" >

< input type = "text" value = "" name = "" placeholder = "请输入评论内容" />

</ duv >

< div class = "reply-buttons" >

< button type = "button" class = "btn btn-primary btn-comment btn-sm" > 评论 </ button >

< button type = "button" class = "btn btn-default btn-cancel btn-sm" > 取消 </ button >

</ div >

</ div >

</ div >

< div class = "comment-content" >

< div class = "com-users" >

< div class = "comment-user" >

< span > 知乎用户 </ span >

< div class = "comment-user-content" >

这个爬虫真的好强大！

</ div >

</ div >

< div class = "comment-time" >

< div > 2017.10.01 21:32:30 </ div >

< button class = "btn btn-primary btn-sm btn-reply" > 回复 </ button >

</ div >

</ div >

< div class = "user-reply" >

< duv class = "reply-in" >

< input type = "text" value = "" name = "" placeholder = "请输入评论内容" />

</ duv >

< div class = "reply-buttons" >

< button type = "button" class = "btn btn-primary btn-comment btn-sm" > 评论 </ button >

< button type = "button" class = "btn btn-default btn-cancel btn-sm" > 取消 </ button >

</ div >

</ div >

</ div >

< div class = "comment-content" >

< div class = "com-users" >

< div class = "comment-user" >

< span > 知乎用户 </ span >

< div class = "comment-user-content" >

这个爬虫真的好强大！

</ div >

</ div >

< div class = "comment-time" >

< div > 2017.10.01 21:32:30 </ div >

< button class = "btn btn-primary btn-sm btn-reply" > 回复 </ button >

</ div >

</ div >

< div class = "user-reply" >

< duv class = "reply-in" >

< input type = "text" value = "" name = "" placeholder = "请输入评论内容" />

</ duv >

< div class = "reply-buttons" >

< button type = "button" class = "btn btn-primary btn-sm btn-comment" > 评论 </ button >

< button type = "button" class = "btn btn-default btn-sm btn-cancel" > 取消 </ button >

</ div >

</ div >

</ div >

< div class = "comment-ipt" >

< input type = "text" placeholder = "输入你的评论" >

< button type = "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 >