jquery - 我自己的 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');
    });
});

我首先尝试了 mouseover 和 mouseout，但是当我使用该功能时，Mouseover 起作用了，当我想去 Sub 时，菜单向上滑动，但 mouseout 事件发生。现在它起作用了，但是当我将鼠标悬停在主项目 3 上时，主项目 4 中的潜艇也会在鼠标悬停时打开和关闭？！？！如何只说主要项目 3 或主要项目 4 中的菜单项？？？

希望你明白我的意思？

谢谢

Answer 1

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