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()来延迟在主菜单上隐藏鼠标输出上的子菜单。这使您有时间在子菜单上移动鼠标，如果执行此操作，则会清除超时，因此不会隐藏它。然后当您将鼠标从子菜单移开时，它将被隐藏。但是允许在不同的主菜单项之间移动鼠标，在初始悬停时我们还清除任何未完成的超时并隐藏先前显示的子菜单，以便仅显示正确的子菜单。我已经使用了500毫秒的延迟，但显然你可以将它设置为任何对你来说都很自然的东西。

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

Answer 2

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

Answer 3

如下：

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

jquery - 子菜单隐藏在主菜单的mouseout上

3 个答案: