javascript - jquery - 子菜单在主菜单的鼠标移开时隐藏

Question

这似乎是一个非常简单的问题，但我无法通过阅读此处的相关问题来解决我的问题..所以这是我的。我有:

<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>

我希望 .sub-menu 在鼠标悬停在 .main-menu 上时出现，并在鼠标悬停在 .main 和 sub 上时保持可见。

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

但是当我将鼠标移出主菜单时，即使我将鼠标移出到子菜单，也会触发鼠标移出，因此子菜单被隐藏。

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

Answer 1

下面假设您有第二个子菜单与“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()来延迟在主菜单中鼠标移出时隐藏子菜单。这让您有时间将鼠标移到子菜单上，如果您这样做，超时将被清除，因此它不会被隐藏。然后，当您将鼠标移 ionic 菜单时，它就会隐藏。但是，允许鼠标在不同的主菜单项之间移动，在初始悬停时，我们还清除任何未完成的超时并隐藏先前显示的子菜单，以便仅显示正确的子菜单。我使用了 500 毫秒的延迟，但显然您可以将其设置为您感觉自然的值。

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