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

前端之家收集整理的这篇文章主要介绍了基于JavaScript实现评论框展开和隐藏功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.效果图如下所示,

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

2.HTML代码:需要引入jQuery.js

493 评论
知乎用户
2017.10.01 21:32:30
@H_403_31@
评论
知乎用户
2017.10.01 21:32:30
@H_403_31@
评论
知乎用户
2017.10.01 21:32:30
@H_403_31@
评论
知乎用户
2017.10.01 21:32:30
@H_403_31@
评论
评论">

3.css样式代码,样式无所谓,自己写就可以。

4.js控制对应评论按钮事件。

$(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"); }); });

总结

以上所述是小编给大家介绍的基于JavaScript实现评论框展开和隐藏功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

jsjs评论框展开展开隐藏隐藏隐藏

猜你在找的JavaScript相关文章