javascript - 用于 Bootstrap 的 Jquery 折叠和展开插件

Question

我一直在使用 Bootstrap collapse在我的网站上。

有没有我可以在我的 bootstrap 站点中使用的 jquery，它可以像这样工作。

示例

我有一个评论区。示例评论将是这样的。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellussit amet suscipit magna. Sed nisl ipsum, tempus quis tincidunt non,molestie eget tortor. Sed scelerisque magna arcu, non hendrerit loremvehicula ut. Vestibulum vulputate erat non mauris vulputatecondimentum. Nam adipiscing nec risus at condimentum. Nulla sed loremlacus. Proin bibendum, diam non faucibus fringilla, diam leoscelerisque nisl, sed tempor velit diam eu turpis. Aenean laciniaauctor tellus non tincidunt. Vivamus condimentum sem lacus. Donecvehicula eros erat, eu scelerisque urna varius eu. Phasellus lobortisdignissim dolor euismod pharetra. Morbi sodales posuere nisi sodalesadipiscing. Vestibulum nec tortor vitae diam pharetra pretium sed egetarcu. Vestibulum ultricies rutrum risus. Cras rhoncus magna egetviverra dignissim. Integer et justo lacus.

我想把它做成这样..每行的第 5 行会更改它以使其看起来更像 facebook 上的内容。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellussit amet suscipit magna. Sed nisl ipsum, tempus quis tincidunt non,molestie eget tortor. Sed scelerisque magna arcu, non hendrerit loremvehicula ut. Vestibulum vulputate erat non mauris vulputatecondimentum. Nam adipiscing nec risus at condimentum. Nulla sed lorem

See more...

我尝试在 bootstrap collapse 中使用 collapse 但它折叠了消息的所有部分。

Answer 1

您可以使用 jTruncate jQuery 插件。

In a nutshell, jTruncate provides simple yet customizable truncation for text entities in your web page.

代码:

$().ready(function () {
    $('p').jTruncate({
        moreText: "See more..."
    });
});

演示:http://jsfiddle.net/IrvinDominin/wFTLj/