![jQuery 显示与隐藏更多内容插件 readmore.js](https://pic.salongweb.com/2017/12/readmore.jpg)

开发一个 WordPress 文章筛选功能时，因为选项较多，默认只显示一行，可通过更多与关闭按钮来切换内容，使用到强大实用且轻巧的 jQuery readmore.js插件，可显示与隐藏更多内容，自动添加“更多”和“关闭”链接，这些都是可以自定义。

readmore.js使用非常简单，无需复杂的格式或编码的类名，只需调用.readmore()包含文本块的元素和readmore.js即可完成剩下的工作。

注意：Readmore.js与jquery版本大于1.7.0，浏览器版本尽量使用更高的，低版本的也支持，但是体验效果不好。

## 一、使用方法

1、添加到网站中

1. <script src=“../js/readmore.min.js”></script>

2、使用

1. $(‘article’).readmore();

就是这么简单。你可以改变动画的速度，崩溃块的高度，以及打开和关闭的元素。

1. $(‘article’).readmore({
2. speed: 75,
3. lessLink: ‘<a href=“#”>Read less</a>’
4. });

## 二、选项

速度：100（单位为毫秒）

maxHeight：200 （像素）

heightMargin：16（以像素为单位，以避免倒塌是比仅稍大块了maxHeight）

moreLink：'<a HREF=”#”>阅读更多</ a>’

lessLink：'<a HREF=”#”>关闭</ a>的“

embedCSS：true（需插入CSS的动态，将其设置为假，如果你有一个样式表需要的CSS）

sectionCSS：’display: block; width: 100%;’（设置块的造型，忽略，如果embedCSS是假的）

startOpen：false（不要立即截断，开始在全开位置）

expandedClass：’readmore-js-expanded’（类添加扩展模块）

collapsedClass：’readmore-js-collapsed“（类加入到折叠块）

beforeToggle：function（）{} （称为或多或少链接被点击后，但之前的块被折叠或展开。）

afterToggle：function（）{} （称为后，该块被折叠或展开）

如果该元素具有最大高度 CSS属性，Readmore.js将使用该值，而不是maxHeight选项。

更多内容及英文原文请点击：<http://jedfoster.com/Readmore.js/>