javascript - Readmore.js 实现

Question

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

阅读更多链接:

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

我想要的是仅在移动设备上显示“阅读更多...”按钮和折叠文本。说宽度减去 640px。

所以我应用了一个条件，如果屏幕宽度小于 640px，然后应用:.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');
    }
    })();

问题是，如果您将屏幕大小调整为超过 640 像素，“阅读更多...”按钮仍然存在。只有当你的屏幕超过 640px 并且你重新加载你的页面时才满足第二个条件。顺便说一句，我试图调用函数“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/