jquery - 阅读 Bootstrap 轮播中的更多内容

Question

我正在尝试在 Bootstrap 轮播中使用 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因为溢出仅在 div 可见后应用(这就是 readmore 的工作原理)，因此您最初会看到所有文本，然后它会被缩短。更好的方法是在显示文本之前剪切文本，但在这种情况下，我想 readmore 无法胜任这项任务。无论如何，应该很容易从具有固定高度和 overflow:hidden 的 div 上的文本开始，并在必要时放置按钮来展开它。