jQuery 实现 WordPress评论楼层伸缩特效

转自点点 9 年前 回复

, , , ,

无限嵌套套住我了,一次次得调CSS、php、jQuery,就是希望解决开启无限随之带来的一个接一个似无限个的问题。
此文也是算一个其中衍生出的效果,就是为了更清晰的显示出楼层的级数关系,一眼就能看出是回复谁的。添加特效前得在《在WP主评论加上楼层号》,及在子评论也加上楼层数:

 1){printf('B%1$s', $depth-1);} ?>

代码自行放在functions.php自定义回调评论里,啥含义看代码猜猜呗~(我表示也是瞎改胡乱测试出来的)
现很直观得在评论右上角能看到楼层显示了,主评论是“L几”,子评论是“B几”,接下来添加jQuery特效代码:

//点击楼层数伸缩此评论子评论特效 By ImMmMm.com
$("#comments .commentmetadata span").click(function(){ //点击事件的介入点
	var bb = $(this).parent().parent().parent().parent().children().children('.children'); //晕了吧,我解释什么了,反正主题不同这儿肯定也不同。主要是取得点击的楼层的子评论集合
	if($(bb).is(':visible')){$(bb).slideUp('1500'); //如果子评论显示则收起
	}else{$(bb).slideDown('1500');}; //反之,即子评论已收起,则伸展
	$body.animate( { scrollTop: $(this).offset().top - 200}, 900); //点击楼层的页面滑动事件
});

其实,以上这段jQuery代码没什么通用性,各位童鞋看个思路吧……
其实,这个效果娱乐性大于实用性,如果你想考验下浏览器的话可以挑个高评论的文章,点击楼层数试试……
22:41补充:考虑到现在的浏览器的性能,用稍微弱一点的特效代码,只对点击楼层数的子评论进行伸缩:

$("#comments .commentmetadata span").toggle(function(){
	$(this).parent().parent().next().slideUp('1500');
	},function(){
	$(this).parent().parent().next().slideDown('1500');
});

转自http://immmmm.com/wordpress-comment-floor-stretching-effects.html

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)

7801