So implementieren Sie eine "mehr lesen" -Link mit jQuery

Ich möchte in der Lage sein, eine verkürzte Version eines langen Textfelds standardmäßig anzuzeigen, aber dann einen Link "mehr lesen", die das Feld auf seine Vollversion erweitern würde . Ich habe gerade ein ziemlich einfaches Setup, aber ich habe das Gefühl, dass es einen effizienteren Weg dafür geben sollte.So implementieren Sie eine "mehr lesen" -Link mit jQuery

Hier ist mein aktueller Code:

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

Dies funktioniert, aber scheint klobig. Zum Beispiel wäre es schön, wenn der Originaltext nicht flimmert oder kurz verschwindet, sondern sich einfach ausdehnt. Irgendwelche Vorschläge?

Quelle

2010-08-24 tchaymore

Es gibt a plugin for that. Erfinden Sie das Rad nicht neu.

Quelle

2010-08-24 03:12:38

+1 Wir verwies ihn auf die gleiche Plugin ... jetzt meine Antwort zu löschen :) – Josh

Sehr glatt Plugin und schön anpassbar. Ich wünschte, es wäre in meiner Google-Suche aufgetaucht, aber ich bin froh, dass du es mir gezeigt hast. Vielen Dank! – tchaymore

Bitte geben Sie einen neuen Link ein. dieser ist tot. – Saif

Sie könnten den Text in einem div platzieren und legen Sie den ersten Teil direkt in und der Rest in einer Spanne innerhalb des div

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

In JQuery Sie etwas tun, wie folgt aus:

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

Die Jquery Ref ist here.

Quelle

2010-08-24 03:19:18 Muffun

Schöne Lösung! Ich gab der anderen Antwort den Scheck, weil das Plugin so anpassbar war, aber ich mochte auch Ihre Lösung. – tchaymore

Von 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>

Quelle

2010-08-24 03:25:24 rebelliard

sauber sauber und sauber .. Warum die ganze Zeit hinter Plugins laufen! – madhairsilence

Schauen Sie sich diese plugins.You dies leicht tun können.

jQuery Expander

Readmore.js

Simple Jquery and CSS usage.Not the plugin

Quelle

2013-10-19 20:55:33

So implementieren Sie eine "mehr lesen" -Link mit jQuery

Antwort

Verwandte Themen