这篇文章给大家分享的是有关如何基于JavaScript实现评论框展开和隐藏功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
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>
感谢各位的阅读!关于“如何基于JavaScript实现评论框展开和隐藏功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。