Animation du menu masquer/afficher dans jQuery

Question

Dans un menu, je souhaite appliquer une glissière ou quelque chose comme ça dans jQuery où tous les enfants de li sont masqués par défaut. Quand on clique sur li, cela montre qu'il s'agit d'enfants directs. Montrer les enfants de li cache également tous les autres enfants.

<ul id="navlist"> 
    <li>Information 1<ul> 
     <li>apple1</li> 
     <li>Mango1</li> 
     <li>Banana1</li> 
     </ul> 
    </li> 
    <li>Information 2<ul> 
     <li>apple2</li> 
     <li>Mango2</li> 
     <li>Banana3</li> 
     </ul> 
    </li> 
    <li>Information 3<ul> 
     <li>apple3</li> 
     <li>Mango3</li> 
     <li>Banana3</li> 
     </ul> 
    </li> 

Answer 1

<ul id="MyMenu"> 
    <li> 
    info 1 
    <ul class="inner"> 
     <li>apple1</li> 
     <li>mango1</li> 
     <li>banana1</li> 
    </ul> 
    </li> 
    <li> 
    info 2 
    <ul class="inner"> 
     <li>apple2</li> 
     <li>mango2</li> 
     <li>banana2</li> 
    </ul> 
    </li> 
    <li> 
    info 3 
    <ul class="inner"> 
     <li>apple3</li> 
     <li>mango3</li> 
     <li>banana3</li> 
    </ul> 
    </li> 
</ul> 

$(function(){ 
    $('#MyMenu > li').click(function(){ 
    $('#MyMenu .inner').hide(); //hide all 
    $(this).find('ul.inner').show(); // show the clicked submenu 
    }); 
}); 

Answer 2

réponse de lgalSt fonctionnera pour vous. Cependant, au lieu de réinventer la roue, vous voudrez peut-être consulter le Accordion (cliquez pour voir la démo) dans jQuery UI. Cela fonctionne très bien, l'interface utilisateur de jQuery fonctionne sur tous les navigateurs (vous n'aurez pas à vous soucier des choses qui ne fonctionnent pas dans IE) et il est rapide et facile à configurer. Vous pouvez également utiliser les composants de l'interface utilisateur jQuery du thème afin d'obtenir un aspect cohérent sur votre site.