原创

阅读更多 展开全文的功能是如何实现的

温馨提示:
本文最后更新于 2023年04月09日,已超过 411 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

前言

需求:网站中有一大段内容,默认折叠起来,像CSDN那种点击后再展开全部。

file

思路

今天就通过readmore.js这个库来轻松实现这种效果。
仓库地址:https://github.com/jedfoster/Readmore.js

代码实现

引入类库

js库是通过jQuery实现的所以要求jQuery版本1.9.1及以上

然后就是再代码中引入jQueryreadme.min.js

<script src="jquery.js"></script>
<script src="readmore.min.js"></script>

创建div容器

然后需要有一个容器来包裹起来你的大段内容,并且给div一个id="article"

<div  id = "article" class="article">
这里是大段内容
</div>

调用类库

$('article').readmore({
  speed: 75,
  moreLink: '<a href="#">阅读全文</a>'
  lessLink: '<a href="#">收起</a>'
});

以上就是通过readmore.js来实现折叠展开的效果,但这是最简单的示例,要实现上图那种好看的效果,还需要对样式进行优化

来看一下,我通过readmore.js实现的最终效果
file

正文到此结束
本文目录