javascript - jQuery readmore 函数无法运行

Question

我与 readmore jQuery plugin 一起工作在我的文本中添加更多和更少的内容，如下所示:

JS:

$('.more').readmore({
  speed: 75,
  lessLink: '<a href="#">Read less</a>'
});

HTML:

<div class="more">AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA </div>

但在行动中不适合我!？我该如何解决这个问题？

<强> DEMO FIDDLE

Answer 1

由于多种原因，您的 fiddle 无法工作。

1. 您从未加载过 jQuery。 Readmore 是一个 jQuery 插件，因此它需要 jQuery 才能工作。您应该加载 jQuery 版本 1.9.1。或更高以获得最佳支持。

2. readmore.min.js 未正确加载。您添加为资源的 URL 缺少 http 协议(protocol)。您还应该确保在 Readmore.js 之前加载 jQuery。

3. 您的文字太短，不会被 chop 。默认情况下，如果 html 元素高于 200px，插件将 chop 该元素。在宽屏显示器上，您的文本会被过度拉伸(stretch)，因此其高度将短于 200 像素，并且不需要 chop 。

这是一个工作 fiddle 。

http://jsfiddle.net/x9frr7ov/