wordpress折叠效果 | 浮生无事Blog

在wordpress使用过程中，经常会用到折叠的效果，比如书籍目录之类，如:

实现方法如下

步骤1: 利用自定义html小工具，将工具加入页首，页脚等公共模块，模块配置代码如下:

<script type="text/javascript">
    jQuery(document).ready(
        function(jQuery){
            jQuery('.collapseButton').click(
                function(){
                    jQuery('.x325aFoldingContent').slideToggle('slow');
                }
            );
        }
    );
</script>
<!--此处代码仅为记录，因每次更新主题，都会将下一步修改的functions.php覆盖
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
    return '<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> 
        <div class="x325aFoldingContent" style="display: none;">'.$content.'</div>';
}
add_shortcode('collapse', 'xcollapse');
-->

步骤2: 在打开主题编辑器，在functions.php中增加以下代码:

function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
    return '<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> 
        <div class="x325aFoldingContent" style="display: none;">'.$content.'</div>';
}
add_shortcode('collapse', 'xcollapse');

ps: 小工具中的代码也可放在主题编辑器中的header.php中head标签内，但要注意，同functions.php一样，更新主题后，会被覆盖，需要重新编辑，但如若利用小工具的方法，主题更新则不会对其造成影响