如何基于JavaScript实现评论框展开和隐藏功能-创新互联

这篇文章给大家分享的是有关如何基于JavaScript实现评论框展开和隐藏功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到长宁网站设计与长宁网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟空间、企业邮箱。业务覆盖长宁地区。

1.效果图如下所示，

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

如何基于JavaScript实现评论框展开和隐藏功能

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>

感谢各位的阅读！关于“如何基于JavaScript实现评论框展开和隐藏功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：如何基于JavaScript实现评论框展开和隐藏功能-创新互联
当前URL：https://www.cdcxhl.com/article14/ghgde.html

成都网站建设公司_创新互联，为您提供虚拟主机、自适应网站、域名注册、响应式网站、定制网站、做网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

绵阳服务器托管

网站导航知识

分类信息网