Реализация 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 ();

Код ниже:

    (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 () не является функцией.

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/