définir des actions pour li article

Question

Je ne vais pas à effectuer une action pour la li cliqué, comme pour expample basculer ul imbriqué

c'est le html

<script type="text/javascript"> 
$(function() { 
    $('#verticalfade').verticalfade(); 
}); 
</script> 
<div id="verticalfade_container"> 
    <ul id="verticalfade"> 
     <li>Le Collezioni 
      <ul> 
       <li>Link 1</li> 
       <li>Link 2</li> 
      </ul> 
     </li> 
     <li>Extra Plus 
      <ul> 
       <li>Link 1</li> 
       <li>Link 2</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Ceci est le javascript:

(function($){ 
    $.fn.extend({ 
     verticalfade: function(options){ 

      var defaults = { 
       speed: 'normal' 
      }; 
      var options = $.extend(defaults, options); 


      $('ul#verticalfade li ul').each(function(){ 
       $('ul#verticalfade li ul').hide(); 
      });  

      $('ul#verticalfade li').each(function(){ 
       $(this).click(function(){ 
        $(this).next('ul').toggle(500); 
       }); 
     }); 
     }  
    }); 
})(jQuery); 

Je cache tous les sous-ul dans la liste mais je ne peux pas définir une fonction pour chaque li pour afficher uniquement le suivant ul. J'ai essayé la fonction suivante ('ul') mais je peux seulement basculer tout le ul à la fois.

Answer 1

changement $(this).next('ul').toggle(500); à

//first line hides the previously clicked li's children $(this).siblings('li').children('ul').slideUp(); $(this).children('ul').toggle(500);

Answer 2

est ici une simple variante (source complète à http://gist.github.com/575089):

En substance:

$('ul#verticalfade > li > ul').each(function(){ 
     $(this).hide(); 
    });  

$("ul#verticalfade > li").click(function(){ 
    $("ul", this).toggle(500); 
});