我自己的jQuery的手風琴

Question

嗨，我已經創建了下面的菜單結構：

<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> 

所以這是我的菜單結構。現在我想使用jQuery Latest來製作SlideUp/SlideDown效果。

我這樣做是這樣的：

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

我第一次嘗試鼠標懸停和鼠標移開，但是當我使用的功能，將鼠標懸停工作，當我想要去子，菜單滑動，但鼠標移出事件發生。現在，它的工作，但是當我徘徊，例如在主要項目3上，主要項目4中的子項目也在mouseout上打開和關閉？！？！如何僅說出來自例如主要項目3奧德主項目4

希望你明白我的意思嗎？

感謝

Answer 1

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