Читайте больше в карусели Bootstrap

Question

Я пытаюсь использовать readmore.js внутри карусели бутстрапа. Он работает над первым слайдом, но не работает над следующими слайдами.

$(document).ready(function() { 
    $('article').readmore({ 
      moreLink: '<a href="#">[ + ]</a>', 
      lessLink: '<a href="#">[ - ]</a>', 
      collapsedHeight: 30, 
      speed:500, 
     }); 

    }); 

Пример:

http://jsfiddle.net/gXN2u/136/

Любая идея, почему эта функция не работает на остальных слайдах?

Answer 1

Вы ссылаетесь на функцию readmore() на готовом документе и поэтому действуют только на видимый элемент. Самым простым способом исправить это запустить его каждый раз, когда карусель отображает новую вкладку, используя события, например: http://jsfiddle.net/oympgthw/

Существует однако FOUC как переполнение применяется только после того, как ДИВ видна (это, как ЧИТАТЬ работы), поэтому вы сначала видите весь текст, а затем сокращаетесь. Лучший подход - вырезать текст перед его отображением, но в этом случае я думаю, что readmore не соответствует задаче. В любом случае должно быть легко начать с текста на div с фиксированной высотой и overflow: hidden и поместите кнопку, чтобы расширить его, если это необходимо.