Expander是一个简单、可自定义的jQuery文本截断插件，允许您快速轻松地向任何内容添加扩展和折叠功能。

当文本折叠时，“阅读更多”链接将变成一个可点击的锚标记。相反，当文本展开时，无读链接将变成一个锚标记。

这个插件使用jQuery的幻灯片和淡入淡出转换，可以支持内联和块级元素。

如何使用它:

1.在最新的jQuery库之后的某个地方添加jQuery Expander插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.expander.min.js"></script>

2.调用targer元素上的函数。默认情况下，插件会自动折叠超过100个字符的文本。

<p class="demo">
  Your Text Here
</p>

$(function(){
  $('.demo').expander();
});

3.覆盖默认的字符限制。默认值：100。

$('.demo').expander({
  slicePoint: 50,
});

4.确定是否显示单词计数器，该计数器显示“阅读更多”链接后面的单词数。默认值：false。

$('.demo').expander({
  showWordCount: true,
  wordCountText: ' ({{count}} words)',
});

5.自定义多读和少读链接。

$('.demo').expander({
  expandText: 'read more',
  expandPrefix: '… ',
  moreLinkClass: 'more-link',
  userCollapseText: 'read less',
  userCollapsePrefix: ' ',
  lessLinkClass: 'less-link',
});

6.设置展开和折叠内容时的过渡。

$('.demo').expander({
  // or 'fadeIn'
  expandEffect: 'slideDown', 
  expandSpeed: 250,
  // or 'fadeOut'
  collapseEffect: 'slideUp',
  collapseSpeed: 200,
});

7.更多配置选项。

$('.demo').expander({

  // whether to keep the last word of the summary whole (true) or let it slice in the middle of a word (false)
  preserveWords: true,

  // whether to normalize the whitespace in the data to display (true) or not (false)
  normalizeWhitespace: true,

  // text to include between summary and detail. Default ' ' prevents appearance of
  // collapsing two words into one.
  // Was hard-coded in script; now exposed as an option to fix issue #106.
  detailPrefix: ' ',

  // a threshold of sorts for whether to initially hide/collapse part of the element's contents.
  // If after slicing the contents in two there are fewer words in the second part than
  // the value set by widow, we won't bother hiding/collapsing anything.
  widow: 4,

  expandAfterSummary: false,

  // Possible word endings to test against for when preserveWords: true
  wordEnd: /(&(?:[^;]+;)?|[0-9a-zA-Z\u00C0-\u0100]+|[^\u0000-\u007F]+)$/,

  // class names for summary element and detail element
  summaryClass: 'summary',
  detailClass: 'details',

  // number of milliseconds after text has been expanded at which to collapse the text again.
  // when 0, no auto-collapsing
  collapseTimer: 0,

  // allow the user to re-collapse the expanded text.
  userCollapse: true,
  
});

8.回调函数。

$('.demo').expander({

  onSlice: null, // function() {}
  beforeExpand: null, // function() {},
  afterExpand: null, // function() {},
  onCollapse: null, // function(byUser) {}
  afterCollapse: null // function() {}
  
});

预览截图

阅读更多/更少链接展开和折叠文本 扩展器