javascript - jQuery 扩展菜单

Question

我有这个 html 代码:

<ul id="nav">
    <li>Heading 1
        <ul>
            <li>Sub page A</li>
            <li>Sub page B</li>
            <li>Sub page C</li>
        </ul>
    </li>
    <li>Heading 2
        <ul>
            <li>Sub page D</li>
            <li>Sub page E</li>
            <li>Sub page F</li>
        </ul>
    </li>
</ul>

使用这段 JS 代码:

$(function(){
    $('#nav>li>ul').hide();
    $('#nav>li').mouseover(function(){
        if ($('#nav ul:animated').size() == 0) {
            $heading = $(this);
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });
})

目前代码是这样工作的:单击标题 1 时，菜单会展开。单击标题 2 时，标题 2 子菜单展开，标题 1 子菜单关闭。我需要将其修改为:子菜单必须在鼠标移出时自动关闭。 有人可以帮我吗？ 提前致谢!

Answer 1

这是一个略有不同的动画(模拟滑动，而不是一个接一个地滑动)，但如果它是一个选项.hover()使用 mouseenter和 mouseleave而不是 mouseover和 mouseout (对 child 开火)会简单得多，像这样:

$(function(){
    $('#nav>li>ul').hide();
    $('#nav>li').hover(function(){
        $(this).find('ul').slideToggle(500)
               .siblings().find('ul:visible').slideUp(500);
    });
})