Readmore.js 基于 jQuery 内容显示和隐藏插件

Question

readmore.js 是一个平滑，轻巧的jQuery插件，通过 阅读更多 和 关闭 链接折叠和展开大段文字，对于 Readmore.js 所需的标记也非常轻巧，非常简单。无需复杂的格式或编码的类名，只需调用 .readmore() 包含文本块的元素和 Readmore.js 即可完成剩下的工作。

Readmore.js 依赖于 jquery 版本大于1.7.0。

使用方法

$('article').readmore();

是的，就这么简单。您可以更改动画，倒塌块的高度，以及打开和关闭元素的速度。

$('article').readmore({
  speed: 75,
  maxHeight: 500
});

可选参数

• 速度：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选项。

回调函数

The callback functions, beforeToggle() and afterToggle, both receive the same arguments: trigger, element, and expanded.

• trigger: the "Read more" or "Close" element that was clicked
• element: the block that is being collapsed or expanded
• expanded: Boolean; true means the block is expanded

回调函数示例

Here's an example of how you could use the afterToggle callback to scroll back to the top of a block when the "Close" link is clicked.

$('article').readmore({
  afterToggle: function(trigger, element, expanded) {
    if(! expanded) { // The "Close" link was clicked
      $('html, body').animate( {
        scrollTop: element.offset().top
      }, {duration: 100 } );
    }
  }
});

推荐 CSS

The intention behind Readmore.js is to use CSS for as much functionality as possible. In particular, “collapsing” is achieved by setting overflow: hidden on the containing block and changing the height property.

By default, Readmore.js inserts the following CSS:

.readmore-js-toggle, .readmore-js-section {
  display: block;
  width: 100%;
}
.readmore-js-section {
  overflow: hidden;
}

You can override the the first set of rules when you set up Readmore.js like so:

$('article').readmore({
  sectionCSS: 'display: inline-block; width: 50%;'
});

If you want to include the necessary styling in your site’s stylesheet, you can disable the dynamic embedding by passing embedCSS: false in the options hash.

$('article').readmore({embedCSS: false});

销毁 Readmore

You can remove the Readmore functionality like so:

$('article').readmore('destroy');

Or, you can be more surgical by specifying a particular element:

$('article:first').readmore('destroy');