Question

我有一些内容，我想只显示几行和“阅读更多”按钮，然后当用户点击“阅读更多”按钮时，其余内容将通过内容div显示向下（延伸其高度），然后将更多按钮替换为“关闭”。

有没有人知道任何JS Fiddle演示或教程中有类似事情的例子？

Answer 1

你有两个选择...... 将附加内容加载到具有..的div中。

display: none;

on load然后使用jQuery

.show()

单击按钮时显示内容。

如果您有大量数据或可能使用的图像，并且jQuery使用AJAX调用将数据加载到div中。这样做时，我会使用一个空白的div来准备加载内容。

Answer 2

您可能需要this之类的内容。

它使用jQuery中的slideToggle()方法。如果您不希望它幻灯片，那么只需使用toggle()即可。请注意，long-text元素首先设置了display: none样式。

参考：https://api.jquery.com/slideToggle/

Answer 3

根据您的要求，有一个简单的jquery插件。

它会自动缩短元素中的文本并添加“更多”链接。显示完整文本后，也会显示“less”链接。

<强>用法：

缩短“元素”中的文字并添加“更多”链接。

$(element).shorten();

添加包含文字'read more'的链接，同时缩短元素的内容。

$(element).shorten({
    moreText: 'read more'
});

将链接文字更改为“read more”和“read less”覆盖默认值“more”和“less”。

$(element).shorten({
    moreText: 'read more',
    lessText: 'read less'
});

覆盖默认显示100个字符并隐藏50个字符以上的文字。

$(element).shorten({
    showChars: '50',
});

有关详细信息，请参阅this link。

您也可以参考相同here

的演示

Answer 4

您的内容的基本结构，以便您可以启用此功能。

<div class="more-less">
    <div class="more-block">
        <p>The Content</p>
    </div>
</div>

您放入“更多块”div的任何内容都将是可扩展的。需要“更少”的div来保存更多/更少的链接和[...]，这是使用jQuery添加的，节省了添加这些小部件的时间。

$(function () {

    // The height of the content block when it's not expanded
    var adjustheight = 80;
    // The "more" link text
    var moreText = "+  More";
    // The "less" link text
    var lessText = "- Less";

    // Sets the .more-block div to the specified height and hides any content that overflows
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');

    // The section added to the bottom of the "more-less" div
    $(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');

    $("a.adjust").text(moreText);

    $(".adjust").toggle(function () {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function () {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });
});

这是演示.. http://jsfiddle.net/9FLx5/

Answer 5

以下是使用slideToggle

的demo

HTML：

Bla bla bla
<div id="content" style='display:none'>more bla bla bla bla</div>
<div id="click-me">more ...</div>

的Javascript / JQuery的：

$(document).ready(function () {
    $("#click-me").click(function () {
        var moreOrless = $("#content").is(':visible') ? 'more ...' : 
                           ' less';
        $(this).text(moreOrless);
        $("#content").slideToggle();
    });
});

单击/切换以显示更多信息

5 个答案: