网上关于实现文章内容“展开/收缩”效果的方法有很多，但是有很多代码似乎已经不可用，而另一些虽然可用但是前端显示效果不怎么美观，于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功能吧。

JS代码

/* 为网站添加“点击展开/收缩”功能开始 */
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
/* 为网站添加“点击展开/收缩”功能结束 */

修改主题functions.php文件

然后将下方代码添加到“模板函数 (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】

在添加代码的时候注意上方代码中将中文【】字符修改为[]。

当然，为了更方便的使用“展开/收缩”功能，你也可以将下面的代码继续添加到你主题的functions.php文件中去，在文章编辑的代码界面就可以看到一个“展开/收缩按钮”了。编辑文章的时候直接选中要隐藏的内容再点击这个按钮就可以自动插入短代码实现“展开/收缩”功能了。

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {
?>
    
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'collapse', '展开/收缩按钮', '【collapse title="说明文字"]','[/collapse]' );
        } 
    
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );