Readmore.js实现

Question

我正在网站上实现Readmore.js。

链接到Readmore：

• http://www.fao.org/fileadmin/scripts/jquery/Readmore.js-master/demo.html
• https://github.com/jedfoster/Readmore.js

我想要的是显示“阅读更多...”按钮，并仅在移动设备上折叠文本。说宽度少640像素。

因此，如果屏幕宽度小于640像素，则我应用了一个条件，然后应用：.readmore（）;

下面的代码：

TopologyBuilder

问题是，如果您调整屏幕的大小超过640像素，“更多...”按钮仍然存在。仅当您的屏幕超过640像素并且重新加载页面时，才符合第二个条件。 顺便说一句，我试图调用函数“ onresize”事件，但弹出错误消息说.readmore（）不是函数。

Answer 1

请提前提供此代码...

$(window).on('resize', function() {
  var $reader = $('.quote-heading').readmore({
    speed: 75,
    lessLink: '<a href="#">Less</a>',
    moreLink: '<a href="#">Read more...</a>',
    collapsedHeight: 100
  });

  if ($(window).width() < 640) {
    $reader.readmore('destroy');
  }
}).trigger('resize');

可以在此处找到一个有效的示例：https://jsfiddle.net/o6cz8e1h/