javascript - Readmore.js实现

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

链接到Readmore：


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


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

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

代码如下：

    (function resize(){
    if (document.body.clientWidth<=640) {
      $('.quote-heading').readmore({
      speed: 75,
      lessLink: '<a href="#">Less</a>',
      moreLink:'<a href="#">Read more...</a>',
      collapsedHeight: 100,
      blockProcessed:function(element,collapsable){
          console.log(element);
      }
        });
    }
    if (document.body.clientWidth>640){
      $('.quote-heading').readmore('destroy');
    }
    })();

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

最佳答案

之前提供此代码...

$(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/