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可见本站公告页面

49 Comments

Name *

E-mail *

Website

  1. WindyLiu

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

    • 小蝴蝶

      @WindyLiu : :eek: 你咋知道我管理系的

      • WindyLiu

        @小蝴蝶 : 第六感。

        • 小蝴蝶

          你可拉倒吧..快告诉我快告诉我

          • WindyLiu

            @小蝴蝶 : Life is like a boat看到的 :huai:

            • 小蝴蝶

              我就说..我隐藏的这么深

            • 小蝴蝶

              你网站评论总在加载出不来,可能校园网太慢了..

  2. 所谓刚子

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

    • 小蝴蝶

      我自己用着忒欢喜,谁知道大家都喷我啊,呜呜呜

  3. xsinger

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

    • 小蝴蝶

      :mrgreen: 那就好

  4. 零落千起

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

    • 小蝴蝶

      敢情你装vs是为了重装网站 蛋疼..

  5. U丶z

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

    • 小蝴蝶

      你这主题好像木木啊,哈哈

  6. axiu

    toggle各种方便~·

    • 小蝴蝶

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

  7. 老公

    老婆老婆我点广告了 一直在放着 么么么么 :meme: 小蝴蝶最丑!

  8. 老公

    老公第一 老公开了6个老婆的网站刷信誉度 但是还要等 老是显示我评论太快 这个老婆要改进 :xiao: :huai: :koubixiu: :qin: 唧唧 老婆最丑 么么么 :zhuangb: :zhuangb: :zhuangb: :zhuangb:

    • 小蝴蝶

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

  9. kn007

    没有example啊、。。

    • 小蝴蝶

      @kn007 example在以前主题里 换了之后没补这个功能

  10. 传说博客

    女程序员…