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上的文本开始，并在必要时按下按钮展开它。

阅读更多Bootstrap轮播

1 个答案: