Javascript jQuery扩展菜单

我有以下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>

现在代码是这样工作的：当点击标题1时，菜单被展开。单击标题2时，标题2子菜单展开，标题1子菜单关闭。我需要把它改成这样：鼠标离开时，子菜单必须自动关闭。 有人能帮我吗？

---

提前谢谢

这是一个稍有不同的动画（模拟滑动，而不是一个接一个），但是如果它是一个使用and而不是and（在儿童身上激发）的选项，则会简单得多，如下所示：

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

---

好的，如果您想保留原来的设置并添加mouseout功能，但发现

mouseout

在

mouseover

之前触发，您可以使用ol'

setTimeout

技巧：

$(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);
            }
        }
    }).mouseout(function() {
         var $heading = $(this);
         window.setTimeout(function() {
            if ($('#nav ul:animated').size() == 0) {
                $heading.find('ul').slideUp(500);
            }
        }, 0);
    });
})

---

试试这个，但是你可能需要增加一些延迟来获得流畅的用户体验

$(function(){
    $('#nav>li>ul').hide();
    $('#nav>li').hover(function(){
        $(this).children().slideDown(500);
    }, function(){
        $(this).children().slideUp(500);
    });
})

---

我正在使用

.hover（函数（）

和

.mouseLeave（函数（）

）进行操作，它工作得非常好：

$('ul.expanded>li>ul').hide();
          $('ul.expanded>li').hover(function(){
             if ($('ul.expanded ul:animated').size() == 0) {
                 $heading = $(this);
                 $expandedSiblings = $heading.siblings().find('ul:visible');
             if ($expandedSiblings.size() > 0) {
                 $expandedSiblings.slideUp(1000, function(){
                 $heading.find('ul').slideDown(500);
                 });
             }
             else {
                 $heading.find('ul').slideDown(500);
                 }
             }
          }).mouseleave(function() {
                 var $heading = $(this);
                 window.setTimeout(function() {
                 if ($('ul.expanded ul:animated').size() == 0) {
                 $heading.find('ul').slideUp(1000);
                 }
             }, 0);
          });

---

它工作，但子菜单不应该关闭时，鼠标是在他的尼斯之一，以防万一有人想玩它。

$('ul.expanded>li>ul').hide();
          $('ul.expanded>li').hover(function(){
             if ($('ul.expanded ul:animated').size() == 0) {
                 $heading = $(this);
                 $expandedSiblings = $heading.siblings().find('ul:visible');
             if ($expandedSiblings.size() > 0) {
                 $expandedSiblings.slideUp(1000, function(){
                 $heading.find('ul').slideDown(500);
                 });
             }
             else {
                 $heading.find('ul').slideDown(500);
                 }
             }
          }).mouseleave(function() {
                 var $heading = $(this);
                 window.setTimeout(function() {
                 if ($('ul.expanded ul:animated').size() == 0) {
                 $heading.find('ul').slideUp(1000);
                 }
             }, 0);
          });