Блог

Я создал простую функцию read more с помощью jquery, которая показывает и скрывает текст, состоящий из нескольких символов. Это работает нормально, однако я использовал некоторый открытый исходный код, и я хотел бы подробнее понять, как изменить порядок создаваемого html. Во-первых, я хотел бы, чтобы кнопка находилась под текстом. Таким образом, интервал с классом hidden отображается перед кнопкой, таким образом, текст не переносится на отдельную строку. Я также хотел бы добавить ‘…’ перед этим скрытым промежутком и в конце видимого текста. Когда я попытался переместить строку, которая добавляет интервал, с помощью класса hidden, этот текст попадает внутрь кнопки.

https://jsfiddle.net/w4j5rhme/

 jQuery( document ).ready(function() {
  jQuery(function () {
      var maxL = 150;

      jQuery('.outer-card-expand p').each(function () {

          var text = jQuery(this).text();
          if(text.length > maxL) {

              var begin = text.substr(0, maxL),
                  end = text.substr(maxL);

              jQuery(this).html(begin)
                  .append(jQuery('<div class="see-more see-more-closed"></div>').html(''))
                  .append(jQuery('<span class="hidden">').html(end))
          }
      });

      jQuery(document).on('click', '.see-more', function () {
          jQuery(this).next('.hidden').slideToggle(400);
      })        
  })
});
 

Во-первых, вот модифицированный скрипт, который работал для меня в Edge, Firefox и Chrome

 jQuery( document ).ready(function() {
  jQuery(function () {
      
    var maxL = 150;

      jQuery('.outer-card-expand p').each(function () {

          var text = jQuery(this).text();
          if(text.length > maxL) {

              var begin = text.substr(0, maxL),
                  end = text.substr(maxL);

              jQuery(this).html(begin)
                .append('<span class="read-more">...</span>')
                .append(jQuery('<span class="hidden">').html(end))
                .append(jQuery('<div class="see-more see-more-closed"></div>').html(''))

          }
      });

      jQuery(document).on('click', '.see-more', function () {
        jQuery('.hidden').slideToggle(400);
        jQuery('.read-more').toggle('hidden');
      })        
  })
});
 

Два изменения

1. Функции упорядочивания .append были переключены, и добавлен интервал для указания большего количества текста
2. применить .slideToggle непосредственно к скрытому диапазону, а также включить видимость <span class="read-more">...</span>