Révélez les éléments cachés dans jQuery

Question

J'ai un div doit montrer les trois premiers éléments d'une liste, si cette liste est plus grande que trois éléments, j'aimerais qu'un bouton se déclenche pour développer tous les éléments. Il me est possible de savoir combien d'articles seront dans la liste via PHP, mais ce nombre pourrait être de 0 à 30.

<style type="text/css"> 
    .box { 
     height: 80px; 
     overflow: hidden; 
    } 
    .box li { 
     height: 20px; 
     background: red; 
    } 
</style> 

<div class="box"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </ul> 
</div> 
<a href="#show-all">Show All</a> 

Est-il possible que je peux trouver automatiquement la bonne hauteur que div besoins à étendre à? ou y a-t-il un moyen de laisser simplement jQuery développer la div jusqu'à ce que tous les éléments de la liste soient visibles?

Answer 1

Vous devriez être en mesure de lire la hauteur de la ul encore

alert($(".box ul").height()); 

devrait vous donner la hauteur, quelle que soit la hauteur de la div est.

Vous pouvez faire

$(".box").animate({ height: $(".box ul").height()+"px" }); 

Answer 2

Vous pouvez pas définir les attributs à déborder: caché pour commencer. Enregistrez la hauteur en charge. Ensuite, réglez le CSS pour déborder jusqu'à nouvel ordre.

/* I believe boxHeight will take the value of .height() in this case */ 
var boxHeight = $("#myBox").height().css({"height":"100px","overflow":"hidden"}); 

Answer 3

J'ai implémenté quelque chose de très similaire il y a un mois.

Si vous n'avez simplement que trois éléments de liste dans la liste pour commencer et ajouter le reste lorsque le bouton 'Afficher tout' est pressé, il sera automatiquement redimensionné. Vous devrez supprimer le 'débordement: caché'.