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
>