如何实现“更多”链接与jQuery

我希望能够默认显示很长的文本字段的缩短版，但后来有一个“更多”链接，将领域拓展到它的完整版。我现在有一个非常简单的设置，但觉得应该有一个更有效的方法来做到这一点。如何实现“更多”链接与jQuery

这里是我当前的代码：

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

这工作，但似乎笨重。例如，如果原始文本不会闪烁或短暂消失，而是顺利地展开，那将会很好。有什么建议么？

来源

2010-08-24 tchaymore

有a plugin for that.不要重新发明轮子。

来源

2010-08-24 03:12:38

+1我们称他为相同的插件...现在删除我的答案:) – Josh 2010-08-24 03:14:37

非常光滑的插件，并很好地定制。希望它想出了在我的谷歌搜索，但很高兴，你们都指出了这一点给我。谢谢！ – tchaymore 2010-08-24 19:41:13

请给出一个新的链接。这个死了。 – Saif 2015-03-31 11:11:13

你可以放置在一个div文字和第一部分直接放置在与格内的跨度其余

<div> 
    first part of the text 
    <span id="expendable" style="display:none"> 
    second part of the text 
    </span> 
</div>

jQuery中你做这样的事情：

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

Jquery的参考号是here。

来源

2010-08-24 03:19:18 Muffun

不错的解决方案！我把支票给了另一个答案，因为这个插件是如此的可定制的，但我也喜欢你的解决方案。 – tchaymore 2010-08-24 19:41:48

从jQuery Recipes：

<html> 
    <head> 
     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".message").hide(); 
       $("span.readmore").click(function(){ 
        $(".message").show("slow"); 
        $(this).hide(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div> 
     Styles make the formatting job much easier and more efficient. 
     </div> 
     <span class="readmore">Read More...</span> 
     <div class="message"> 
     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. 
     </div> 
    </body> 
</html>

来源

2010-08-24 03:25:24 rebelliard

清洁干净清洁..为什么一直在插件后面运行！ – madhairsilence 2012-12-11 05:38:07

检查这些plugins.You可以很容易地做到这一点。

jQuery Expander

Readmore.js

Simple Jquery and CSS usage.Not the plugin

来源

2013-10-19 20:55:33

如何实现“更多”链接与jQuery

回答

相关问题