阅读更多 展开全文的功能是如何实现的
温馨提示：
本文最后更新于 2023年04月09日，已超过 526 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
前言
需求：网站中有一大段内容，默认折叠起来，像CSDN那种点击后再展开全部。
思路
今天就通过readmore.js这个库来轻松实现这种效果。
仓库地址：https://github.com/jedfoster/Readmore.js
代码实现
引入类库
js库是通过jQuery实现的所以要求jQuery版本1.9.1及以上
然后就是再代码中引入jQuery和readme.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实现的最终效果
正文到此结束
- 本文标签： 前端
- 本文链接： https://www.it1997.com/article/117
- 版权声明： 本文由小陈没烦恼原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
近期评论
-
来自： 好用的截图工具FastStone Capture 带激活码）
-
来自： 留言板
-
来自： 留言板
-
来自： 留言板
-
来自： 留言板