Warning: Attempt to read property "post_type" on null in /www/wwwroot/wper.net/wp-content/plugins/wper-meta.php on line 317

很多站长想要将自己网站评论列表弄的更好看些，今天为大家分享一下WordPress主题开发评论列表伸缩显示子评论教程。

评论是点击查看对话按钮控制显示的。同时查看对话和关闭对话也随着伸缩而变化。

实现步骤：

首先要控制的是查看对话和关闭对话，仅出现在有子评论的父级评论下，我这边的思路是先判断$comment->comment_parent 是否为 0 ；同时在前天折腾中，有个记录子评论数量的函数，由child_comment_counter($comment->comment_ID) 是否大于0 。两个条件需要同时满足，代码如下：

<?php if(child_comment_counter($comment->comment_ID)>0 && $comment->comment_parent == ‘0’){?>

<div class=”part js-comments”>

<i class=”icon-message”></i><span class=”js-comment”>查看对话</span>

</div>

<?php }?>

然后来给查看对话这个按钮进行控制，点击第一次显示子评论，并修改查看对话为关闭对话。第二次点击，关闭子评论并将关闭对话改为查看对话：

/*查看子评论*/

$(“.part .js-comment”).click(function(){

if($(“ul.children”).css(“display”)==”none”){

$(“ul.children”).fadeIn();

$(this).html(‘关闭对话’);

}else{

$(“ul.children”).fadeOut();

$(this).html(‘查看对话’);

}

});

需要说明的是，默认时，ul.children是隐藏的，即display：none。