Readmore.js 实现

Posted 2023-05-09

【中文标题】Readmore.js 实现

【英文标题】：Readmore.js Implementation

【发布时间】：2019-10-17 04:29:28

【问题描述】：

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

阅读全文链接：

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');
    
    )();

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

【问题讨论】：

你可以使用 CSS 来隐藏锚标签吗？可能比每次窗口更改大小等时使用 JS 检查窗口宽度要轻一些。

【参考方案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/