html处理长文章折叠展示阅读更多readmore.js

2021-07-15

354次阅读

最近折腾的文学网开完工了，已经做最后的细化了。使用的是thinkphp框架开发的一套cms，理论支持百万级别数据的那套。

差不多了，前几天一直在弄后端，解密重写，查询方法重写，搞得头大。昨天开始弄前端的，一天多时间，前端已经完成了。现在就细化一点侧边栏目的调用自己写一些自适应的样式来调节手机端。

之前看过一个网站，做的挺好的，是做古诗词的，https://www.zuowenxue.com/seo也还行。不过我注意到的是它页面的长文折叠。所以今天想起来就直接把这个弄过来了。

文章页添加代码：

<script>
    $('.detail-con').readmore({
        moreLink: '<div class="read"><a href="#">展开阅读全文</a></div>',
        lessLink: '<div class="read"><a href="#">收起已展开</a></div>',
        // 默认显示高度555的内容
        maxHeight: 555,
        afterToggle: function(trigger, element, expanded) {
            if(! expanded) { // The "收起" link was clicked
                $('html, body').animate( { scrollTop: element.offset().top }, {duration: 500 } );
            }
        }
    });
</script>

注意：.detail-con 这个是你页面需要折叠的 class 选择器，你可以换成你自己的，用class 或者 id 都可以。建议唯一。

在使用上面这个js之前，先调用一下readmore外部js方法。

打开 https://www.zuowenxue.com/wenxue/js/readmore.js 保存 JS 到本地，然后放到网站里面就行。