如何實現「更多」鏈接與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

回答

相關問題