如何使用jQuery实现“read more”链接

我希望能够默认显示长文本字段的缩短版本，但是后面会有一个“阅读更多”链接，将该字段扩展为完整版本。 我现在有一个非常简单的设置，但感觉应该有一个更有效的方法来做到这一点。

这是我目前的代码：

$(document).ready(function () { $("#narrative-full").hide(); $("a#show-narrative").click(function() { $("#narrative-short").hide(); $("#narrative-full").show('fast'); }); $("a#hide-narrative").click(function() { $("#narrative-full").hide(); $("#narrative-short").show('fast'); }); }); 

这有效，但看起来很笨重。 例如，让原始文本不闪烁或短暂消失会很好，但只是平滑地扩展。 有什么建议？

Answer 1

有一个插件。 不要重新发明轮子。

Answer 2

来自jQuery食谱 ：

       
 Styles make the formatting job much easier and more efficient. 
 Read More... 
 To give an attractive look to web sites, styles are heavily used. JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too. A person must have a good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform compatibility. 
   

Answer 3

您可以将文本放在div中，将第一部分直接放在div中，其余部分放在div中的span中

 
 first part of the text  second part of the text   

在Jquery中你会做这样的事情：

  $("expendable").slideToggle("slow"); 

Jquery ref就在这里 。

Answer 4

检查这些插件。您可以轻松完成此操作。

jQuery Expander

Readmore.js

简单的Jquery和CSS用法。不插件