utiliser jQuery pour développer/réduire le texte

Question

Je souhaite couper le texte en fonction d'une hauteur fixe. Lorsque le texte est tronqué, un lien "plus" est utilisé pour développer le texte. Lorsque le texte est développé, un lien "moins" est utilisé pour réduire le texte. J'ai écrit les js comme ceci:

$(document).ready(function() { 
     // line height in 'px' 
     var maxheight=218; 
     var showText = "More"; 
     var hideText = "Less"; 

     $('.textContainer_Truncate').each(function() { 
     var text = $(this); 
     if (text.height() > maxheight){ 
      text.css({ 'overflow': 'hidden','height': maxheight + 'px' }); 

      var link = $('<a href="#">' + showText + '</a>'); 
      var linkDiv = $('<div></div>'); 
      linkDiv.append(link); 
      $(this).after(linkDiv); 

      link.click(function (event) { 
       event.preventDefault(); 

       if (text.css('height') == 'auto') { 
        $(this).html(showText); 
        text.css('height', maxheight + 'px'); 
       } else { 
        $(this).html(hideText); 
        text.css('height', 'auto'); 
       } 
      }); 
     }  
     }); 
    }); 

Le code HTML est:

<div class="textContainer_Truncate"> 
    <p>content</p> 
</div> 

Mon problème est que le lien « plus » œuvres mais le « moins » ne fonctionne pas. C'est-à-dire, quand on clique sur plus, le texte est développé mais il ne reviendra pas quand le moins sera cliqué. Qu'est-ce qui ne va pas ici? Merci

Answer 1

Il est juste une petite erreur, ceci:

if (text.css('height') == 'auto') { 

devrait être le suivant:

if (text.height() > maxheight) { 

FIDDLE

Answer 2

Je crois que vous cherchez celui

http://jsfiddle.net/rbUst/

$(".act").click(function() { 
 
    var val = $(this).text(); 
 
    if (val == "More") { 
 
    $("div").css('height', '200px'); 
 
    $(this).text("less"); 
 
    } else { 
 
    $("div").css('height', '20'); 
 
    $(this).text("More"); 
 
    } 
 
    return false; 
 
});

div { 
 
    background-color: #CCA; 
 
    height: 20px; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a href="" class="act">More</a> 
 
<div>This fskdljfl sflsdajfsadf 
 
    <br />fsdafsdfsadfsdf dfjsadf slfkjsf</div>

ci-dessus est l'exemple vivant ..