html 单击readmore 无效,Readmore.js 基于 jQuery 内容显示和隐藏插件 - 文章教程

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>’

lessLink：'关闭 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');