Développer la liste avec slideToggle

J'ai une liste non ordonnée comme celui-ci:Développer la liste avec slideToggle

<a href="#" id="myList-toggle">Show the rest</a> 

<ul id="myList"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<li>Item 7</li> 
<li>Item 8</li> 
<li>Item 9</li> 
<li>Item 10</li> 
</ul>

et ce code jQuery:

var list = $('#myList li:gt(4)'); 
    list.hide(); 
    $('a#myList-toggle').click(function() { 
     list.slideToggle(400); 
     return false; 
    });

Le problème est qu'il glisse chaque élément li individuel, je dois glisser le reste de la liste, comme je glisserais toute la liste.

Comment puis-je faire cela?

Source

2009-02-11 Sindre Sorhus

solution assez maladroite à mon humble avis, mais si cela fonctionne pour vous - cela fonctionne pour vous ...

pour la liste pour réduire et développer en cliquant sur le même lien:

$(document).ready(function() { 

     var list = $('ul#myList'); 
     var original_height = list.height(); 
     var new_height = $('#myList li').height()*5; 
     list.css({height:new_height}); 

     $('a#myList-toggle').click(function() { 
     if(list.height() == original_height) { 
      list.animate({height:new_height}); 
     } else { 
      list.animate({height:original_height}); 
     } 
     return false; 
    }); 

});

Source

2009-02-11 18:55:02

Rapide & manière pas si sale: l'envelopper avec un élément div et slideToggle('#myList div.wrapper').

Source

2009-02-11 08:55:47 ohnoes

Cette méthode ne fonctionne pas, car la liste est un journal, et les éléments les plus récents sont en haut, et que de nouveaux éléments sont ajoutés, les anciens sont poussés vers le bas, et caché. Est-ce possible? –

Vous pouvez donner une hauteur à UL avec overflow:hidden. Ensuite, vous utilisez animation({height:auto}) pour tout afficher. Sinon, vous n'avez aucune solution viable.

Source

2009-02-11 12:01:31

votre méthode n'a pas fonctionné car elle trouverait la hauteur avec la hauteur: auto. Après beaucoup d'échec et essayer, j'ai trouvé quelque chose qui fonctionne, presque.

Avez-vous des commentaires sur mon code, je l'apprécierais vraiment.

Et comment pourrais-je faire, si je veux le même lien pour réduire la liste à nouveau

<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     var list = $('ul#myList'); 
     var original_height = list.height(); 
     list.css({height:$('#myList li').height()*5}); 

$('a#myList-toggle').click(function() { 
list.animate({height:original_height}) 
     return false; 
    }); 

     }); 
</script> 

<style type="text/css"> 
ul#myList { 
    overflow: hidden; 
} 
</style> 
</head> 
<body> 

<a href="#" id="myList-toggle">Show the rest</a> 

<ul id="myList"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<li>Item 7</li> 
<li>Item 8</li> 
<li>Item 9</li> 
<li>Item 10</li> 
</ul> 


</body> 
</html>

Source

2009-02-11 13:04:17

Quel est le problème avec toggeling simplement la liste à la place des éléments?

$(function(){ 
    var listheight = $("#mylist").height(); 
    $("a#myList-toggle").toggle(function(){ 
     $("#mylist").slideToggle(); 
    },function(){$("#mylist").animate({height:listheight})}); 
    });

Source

2009-02-12 16:35:46

Développer la liste avec slideToggle

Répondre

Questions connexes