js实现评论收缩展开功能

其实这个几个礼拜前就弄了,不过到处一问,大家都说不好,囧,就又撤下去了
不过可能也有朋友需要,所以把代码放出来,实现的效果是:默认收起评论中所有的子评论(即回复),点击按钮展开所有子评论,(收缩单个评论回复的js我还没生出来..暂时只能一起收缩所有的),一些喜欢灌水一回复就舍不得停导致子评论拖老长老长的站长朋友比较适合使用.
我们都知道wordpress给子评论分配了一个css属性.children,所以这段代码理解起来就很简单很简单了:默认隐藏.children,点击”展开”按钮使其出现,并唤出”收起”按钮,点击收起按钮使其消失,并唤出展开按钮
先给.children上个 display:hidden 的属性,然后加入下面的js

代码一:用两个按钮分别控制展开和收起

<script type="text/javascript">
jQuery(document).ready(function($){
$('.btn1').click(function(){ //.btn1是展开的按钮,没给它取个好名字,暂时称呼它为爸爸按钮= =
$('.children').show();//点一下爹地,把孩子叫出来
$(this).hide();$('.btn2').show();//.btn2(暂时称它为妈妈按钮) : 把妈妈叫出来,把爸爸叫回去
});
$('.btn2').click(function(){ //点一下妈咪
$('.children').hide();//把孩子叫回去
$(this).hide();$('.btn1').show();//然后爹地又出来了,妈咪又回去了
});

});
</script>

代码二:只用一个按钮

你也可以用.toggle(function(),这样的话只需要一个按钮即可,点两次分别唤出不同的动作,如下:

<script type="text/javascript">
$(".btn1").toggle(function($){
$('.children').show();
},function(){
$('.children').hide();
});
</script> 

但我想单亲家庭的孩纸是很可怜的..

关于按钮:

如果你想只在评论上方显示一次按钮,可以在comments.php里的<ol class="commentlist">上面添加按钮,
如果你想在每个单独评论上方都显示,可以去模板函数里找到定义评论的函数,在 <li <?php comment_class(); ?>上方添加按钮
代码一的按钮调用:<a class="btn1">展开所有回复</a><a class="btn2">收起所有回复</a>
代码二的按钮调用:<a class="btn1">展开收起</a>
demo可见本站公告页面

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 figo

    暂时不用 jQuery ,要用的时候要用一堆才划算~ :huai:

    二月 28, 2013 19:57:56
  2. 板 凳 张书杨

    发现主题在谷歌浏览器很完美,但是IE下,边栏网站统计那个小部件底部跟Footer有些交接起来。而且IECPU高达22%,而谷歌仅仅4%。

    二月 28, 2013 22:43:32
  3. 地 板 张书杨

    形象生动的代码注释,简直就是一家子的生活嘛 :koubi:

    二月 28, 2013 22:47:27
  4. 地 毯 馒头饭Madfan

    单亲家庭的孩纸,很形象的比喻呀

    三月 1, 2013 01:30:37
  5. 地 面 sui

    代码你懂 呵呵

    来我的博客发个祝福吧 呵呵 有人过生日了 谢谢 嘿嘿

    三月 1, 2013 10:49:32
  6. 地 下 小语种外贸网站建设

    看来你的技术玩的很不错

    三月 1, 2013 14:24:09
  7. 7 楼 hostgator

    专业+技术=强悍,支持了

    三月 1, 2013 16:03:55
  8. 8 楼 凤翼天堂

    好功能 不过总觉得大部分情况下都是多此一举=A=

    三月 1, 2013 20:50:23
  9. 9 楼 郑永

    没看清楚还以为是旧文章,隐藏了就很少人回去查阅,这适合产品和软件反馈页面,可以隐藏缺点,而管理员自己回去按着看。

    三月 1, 2013 23:30:18
  10. 10 楼 胡倡萌

    隐藏了还是不太习惯。对了,你那那检测系统和浏览器的是什么插件?

    三月 2, 2013 08:24:06
  11. 11 楼 WindyLiu

    管理系的也这么技术流,人才。

    三月 2, 2013 12:23:35
  12. 12 楼 所谓刚子

    其实应该自己先使用一下这个按钮嘛 这样才能看出效果来啊 哈哈

    三月 2, 2013 13:32:16
  13. 13 楼 xsinger

    话说注释很有爱啊!这样的代码,我愿意看! :lol:

    三月 2, 2013 17:03:34
  14. 14 楼 零落千起

    最迟2天后博客恢复,不来留言小心我d[哔--]o[哔--]s你/天杀的,数据全部丢失,包括网站文件,我现在凭记忆在修改原主题和wordpress 3.5.1的一些代码设置,头都大了,最关键的是vs2012原来是不支持php的…php不是编程语言,是脚本…我现在拿记事本在搞,希望今天4点以前能睡,天杀的vps商,居然没有异地备份,猴里谢特! :ku:

    三月 3, 2013 01:43:35
  15. 15 楼 U丶z

    一直想折腾点js,但种感觉有点虚,折腾一会就。。。歇了~

    三月 7, 2013 14:45:16
  16. 16 楼 axiu

    toggle各种方便~·

    三月 13, 2013 22:52:35
    • 小蝴蝶

      @axiu 只是toggle的话按钮文字不会变,不过肯定比两个轮换来方便多了…

      1601室 三月 14, 2013 14:15:48
  17. 17 楼 小蝴蝶

    尼玛老子网站差点给你刷崩溃

    三月 14, 2013 12:01:02
  18. 18 楼 kn007

    没有example啊、。。

    七月 21, 2013 20:13:38