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时，将展开heading2子菜单菜单，并关闭标题1子菜单。我需要修改它：子菜单必须在mouseout上自动关闭。有人能帮助我吗？提前谢谢！

Answer 1

这是一个略有不同的动画（模拟滑动，而不是一个接一个），但如果它是一个使用.hover()和mouseenter而不是mouseleave的选项mouseover和mouseout（对儿童开火）会更简单，就像这样：

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

Answer 2

好吧，如果您想保留原始设置并添加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);
    });
})

Answer 3

尝试此操作，但您可能需要添加一些延迟才能获得流畅的用户体验。

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

Answer 4

我正在使用.hover(function ()和.mouseLeave (function ()进行此操作并且效果非常好：

$('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);
          });

jQuery扩展菜单

4 个答案: