代码实现WordPress添加“点击展开/收缩”功能

代码实现WordPress添加“点击展开/收缩”功能

13
2021-02-22 09:28:42

很多站长想要在自己的网站实现“点击展开/收缩”功能,可以让网页更加丰富,更接近简洁清晰,今天就为大家分享一下代码实现WordPress添加“点击展开/收缩”功能。

 

步骤一:

 

首先将以下JS代码加入至你网站所引用的JS文件内(例如“functions.js”等):

 

/* 为网站添加“点击展开/收缩”功能开始 */

 

jQuery(document).ready(

 

function(jQuery){

 

jQuery('.collapseButton').click(function(){

 

jQuery(this).parent().parent().find('.xContent').slideToggle('slow');

 

});

 

});

 

/* 为网站添加“点击展开/收缩”功能结束 */

 

步骤二:

 

然后将下方代码添加到“模板函数 (functions.php)”的最底部 ?> 之前:

 

/* 为WordPress添加“点击展开/收缩”功能开始 */

 

function xcollapse($atts, $content = null){

 

extract(shortcode_atts(array("title"=>""),$atts));

 

return '<div style="margin: 0.5em 0;">

 

<div class="xControl">

 

<span class="xTitle">'.$title.'</span>

 

<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>

 

<div style="clear: both;"></div>

 

</div>

 

<div class="xContent" style="display: none;">'.$content.'</div>

 

</div>';

 

}

 

add_shortcode('collapse', 'xcollapse');

 

/* 为WordPress添加“点击展开/收缩”功能结束 */

 

短代码:

 

现在我们可以直接在文章中插入[-collapse title="标题"]需点击展开的内容[-/collapse]就可以使用本功能啦 (填写简码时其中 - 删除)!

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

END
相关标签

发表评论

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