子菜单隐藏在主菜单之外的鼠标上

sub menu is hidden on mouseout of main menu

本文关键字：菜单 鼠标 隐藏      更新时间：2023-09-26

这看起来很容易，但我无法通过阅读SO…上的相关问题来解决我的问题，所以这是我的问题。我有：

<ul class="main-menu">
    <li>Letters</li>
    <li>Numbers</li>
</ul>
<ul class="sub-menu hidden">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

我希望.子菜单出现在.主菜单的鼠标悬停位置，并在鼠标悬停在.主和子上时保持可见

$(".main-menu, .sub-menu").hover(
    function(){
        $('.sub-menu').hide().removeClass('hidden').slideDown('fast');
    }, function(){
        $('.sub-menu').slideUp('fast');
    }
);

但是当我将鼠标从主菜单中移出时，即使我将鼠标移出到子菜单中，也会触发mouseout，所以子菜单是隐藏的。

有什么建议吗？不过，重构HTML不是一种选择。

下面假设您有第二个子菜单来处理"Numbers"主菜单项，就像我在这里显示的一样：http://jsfiddle.net/aY7wW/-并进一步假设，当你说"重组HTML不是一个选项"时，你的意思是我甚至不能建议添加属性来将每个子菜单与其主菜单项相关联。为了在这个限制范围内工作，我使用了主菜单li元素索引与子菜单ul元素索引相关（显然，只有在子菜单与相应的主菜单项以相同的顺序定义时，这才有效）。如果你可以添加一些id属性或其他东西，它会在一定程度上简化代码，但无论如何：

var timerId,
    $mainMenuItems = $(".main-menu li"),
    $subMenus = $(".sub-menu");
$mainMenuItems.hover(
    function(){
        clearTimeout(timerId);
        $subMenus.slideUp('fast');
        $($subMenus[$mainMenuItems.index(this)]).hide()
                                                .removeClass('hidden')
                                                .slideDown('fast');
    }, function(){
        var i = $mainMenuItems.index(this);
        timerId = setTimeout(function(){$($subMenus[i]).slideUp('fast');},500);
    }
);
$subMenus.hover(
    function() {
       clearTimeout(timerId);
    },
    function() {
       $(this).slideUp('fast');
    }
);

其基本思想是使用setTimeout()延迟从主菜单隐藏mouseout上的子菜单。这样可以让您有时间在子菜单上移动鼠标，如果您这样做，超时将被清除，因此不会被隐藏。然后，当您将鼠标从子菜单上移开时，它将被隐藏。但是，允许鼠标在不同的主菜单项之间移动，在初始悬停时，我们还清除任何未完成的超时，并隐藏之前显示的子菜单，以便只显示正确的子菜单。我使用了500毫秒的延迟，但很明显，你可以将其设置为任何你觉得自然的延迟。

工作演示：http://jsfiddle.net/aY7wW/

尝试将主菜单和子菜单都放在div中，并将悬停事件放在div上。

像这样的东西怎么样

$(".main-menu").mouseover(function () {
    $('.sub-menu').slideDown('fast').click(function (){
        $(this).slideUp('fast');
    });
});
相关文章：