My Own jQuery Accordéon

Question

Hey les gars, j'ai créé la structure du menu suivant:

<div id="menu"> 
<ul> 
<li><a href="#">Main Item1</a></li> 
<li><a href="#">Main Item2</a></li> 
<li><a href="#">Main Item3</a> 
    <ul> 
    <li><a href="#">SubItem for MainItem3</a></li> 
    <li><a href="#">2ndSub for MainItem3</a></li> 
    </ul> 
</li> 
<li><a href="#">Main Item4</a> 
    <ul> 
    <li><a href="#">SubItem for MainItem4</a></li> 
    <li><a href="#">2ndSub for MainItem4</a></li> 
    </ul> 
</li> 
</ul> 
</div> 

Voilà ma structure de menu. Maintenant, je veux utiliser jQuery Latest pour faire l'effet SlideUp/SlideDown.

Je fais de cette façon:

$(document).ready(function(){ 
    $('#menu ul li:has(ul)').mouseenter(function(){   
       $('#menu ul li ul').slideDown('slow');        
    }).mouseleave(function(){ 
     $('#menu ul li ul').slideUp('slow'); 
    }); 
}); 

j'ai essayé mouseover et mouseout, mais quand je l'ai utilisé cette fonction, le Mouseover travaillé et quand je voulais aller à la Sous, le menu coulissé, mais mouseout Occours d'événements. Maintenant, cela a fonctionné, mais quand je plane par exemple. sur l'article principal 3, les sous-titres de l'article principal 4 s'ouvrent et se ferment au passage du curseur de la souris?!?! Comment ne dire que les éléments de menu par ex. Article principal 3 ou article principal 4 ???

J'espère que vous comprenez ce que je veux dire?

Merci

Answer 1

$(function(){ 
    $('#menu ul li:has(ul)').hover(function(){     
      $(this).find('ul').slideDown('slow');               
    }, function(){ 
      $(this).find('ul').slideUp('slow'); 
    }); 
});