php 展开收缩,js实现评论收缩展开功能 – 小蝴蝶

其实这个几个礼拜前就弄了,不过到处一问,大家都说不好,囧,就又撤下去了

不过可能也有朋友需要,所以把代码放出来,实现的效果是:默认收起评论中所有的子评论(即回复),点击按钮展开所有子评论,(收缩单个评论回复的js我还没生出来..暂时只能一起收缩所有的),一些喜欢灌水一回复就舍不得停导致子评论拖老长老长的站长朋友比较适合使用.

我们都知道wordpress给子评论分配了一个css属性.children,所以这段代码理解起来就很简单很简单了:默认隐藏.children,点击"展开"按钮使其出现,并唤出"收起"按钮,点击收起按钮使其消失,并唤出展开按钮

先给.children上个 display:hidden 的属性,然后加入下面的js

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

jQuery(document).ready(function($){

$('.btn1').click(function(){ //.btn1是展开的按钮,没给它取个好名字,暂时称呼它为爸爸按钮= =

$('.children').show();//点一下爹地,把孩子叫出来

$(this).hide();$('.btn2').show();//.btn2(暂时称它为妈妈按钮) : 把妈妈叫出来,把爸爸叫回去

});

$('.btn2').click(function(){ //点一下妈咪

$('.children').hide();//把孩子叫回去

$(this).hide();$('.btn1').show();//然后爹地又出来了,妈咪又回去了

});

});

代码二:只用一个按钮

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

$(".btn1").toggle(function($){

$('.children').show();

},function(){

$('.children').hide();

});

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

关于按钮:

如果你想只在评论上方显示一次按钮,可以在comments.php里的

1. 上面添加按钮,

如果你想在每个单独评论上方都显示,可以去模板函数里找到定义评论的函数,在

上方添加按钮

代码一的按钮调用:展开所有回复收起所有回复

代码二的按钮调用:展开收起

demo可见本站公告页面

comments-hide-show is coded by http://xiaohudie.net. Any posts here is one hundred percent original, so please keep my link so as not to hurt this pretty girl. -小蝴蝶