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

技术论点 67 阅读 0

最近折腾的文学网开完工了,已经做最后的细化了。使用的是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 到本地,然后放到网站里面就行。

* Readmore.js jQuery plugin
* Author: @jed_foster
* Project home: jedfoster.github.io/Readmore.js
* Licensed under the MIT license

下面是我网站的效果:

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

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

Tags:

版权声明:若无特殊注明,本文皆为《燕闻墨香博客》原创,转载务必保留文章来源。

本文链接:html处理长文章折叠展示阅读更多readmore.js & https://www.mxooo.cn/1217/

推荐阅读
发表评论 取消回复
表情 图片 链接 代码

分享