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

发布于 2020-07-06 20:11:27 字数 3593 浏览 1991 评论 0

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');

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。