WordPress主题开发评论列表伸缩显示子评论教程

WordPress主题开发评论列表伸缩显示子评论教程

67
2021-03-08 11:44:33

很多站长想要将自己网站评论列表弄的更好看些,今天为大家分享一下WordPress主题开发评论列表伸缩显示子评论教程。
WordPress主题开发评论列表伸缩显示子评论教程 (https://www.wpmee.com/) WordPress开发教程 第1张
评论是点击查看对话按钮控制显示的。同时查看对话和关闭对话也随着伸缩而变化。

实现步骤:

首先要控制的是查看对话和关闭对话,仅出现在有子评论的父级评论下,我这边的思路是先判断$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。

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持
成为会员