单击/切换以显示更多

Question

我有一些内容只需要显示几行内容以及“阅读更多”按钮，然后当用户单击阅读更多按钮时，其余内容将会内容div下降（扩展其高度），然后阅读更多按钮将被替换为“关闭”。

有谁知道任何jsfiddle演示或类似的事情的例子教程？

感谢您的帮助！

保罗

Answer 1

有一个简单的jQuery插件按您的要求。

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

用法：

缩短 '元素' 中的文本，并添加 '更多' 链接。

$(element).shorten(); 

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

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

将链接文本更改为'更多'和'更少'覆盖默认值'更多'和'更少'。

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

覆盖默认显示100个字符并隐藏超过50个字符的文本。

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

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

也可以指你的内容相同here

Answer 2

你有两个选择.... 要么加载额外的内容到具有一个div ..

display: none; 

负载，然后使用jQuery

.show() 

到当按钮被点击时显示内容。

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

Answer 3

您可能想要类似this。

它使用jQuery的slideToggle()方法。如果你不想要它幻灯片然后只使用toggle()。请注意，long-text元素首先具有display: none样式设置。

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

Answer 4

基本结构的演示，让您可以启用此功能。

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

任何你放入“更多块”的div将是可扩展的。 “more-less”div用于保存More/Less链接和[...]，它使用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

这里是一个demo使用slideToggle

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(); 
    }); 
});