记录WordPress全文收缩阅读全文实现策略（点击展开）

老蒋看到不少的网友博客内容页较长的话会通过阅读全文的方式展开，通过JS展开的全文内容，体验度上比较好，比如我们看到的CSDN也是有这样的实现的。这里我先把过程记录下来，等我晚上在测试环境中测试没有问题再添加到网站中。不过有些WP网站主题是自带的，那就比较简单，而我这个主题不自带。

1、JS部分

script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery('.collapseButton').click(function() {
                jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
        }
    );
    }
    );
    /script>

我们可以添加这个JS到头部或者全局引用。

2、功能代码

//展开收缩功能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');

功能部分添加到Functions.php中。

3、CSS样式部分

.xControl {
        padding-left: 32px;
}
    

可以根据需要调整样式包括按钮样式。

4、调用方法

[collapse title="标题"]需点击展开的内容[/collapse]

这里可以在需要隐藏的位置包含到代码中。

参考地址：https://www.cnblogs.com/shenjieblog/p/5061366.html

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！