jQuery-子菜单在主菜单的鼠标移出时隐藏 [英] jquery - sub menu is hidden on mouseout of main menu

问题描述

这看起来很简单，但是我无法通过阅读SO上的相关问题来解决我的问题.所以这是我的.我有:

This seems like a pretty easy one, but I couldn't solve my issue by reading the related questions here on SO.. so here's mine. I have:

<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菜单出现在.main菜单的鼠标悬停时，并在鼠标悬停在.main和sub上方时保持可见.

I want .sub-menu to appear on mouseover of .main-menu, and keep visible while the mouse is over both .main and sub.

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

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

But mouseout is fired when I mouseout of main-menu, even though I mouseout of it into sub-menu, so the sub-menu is hidden.

有什么建议吗?不过，重组HTML并不是一种选择.

Any suggestions? Restructuring the HTML is not an option, though.

推荐答案

以下假设您还有第二个子菜单，与"Numbers"主菜单项一起使用，类似于我在此处显示的内容: http://jsfiddle.net/aY7wW/-并进一步假设当您说重组HTML是不可行的"时您的意思是我什至不建议添加属性来将每个子菜单与其主菜单项相关联.为了在此限制内工作，我使用了主菜单元素索引与子菜单元素索引相关联(显然，仅当子菜单的定义顺序与相应主菜单项的顺序相同时，此方法才有效) .如果您可以添加一些id属性或某些属性，则可以在某种程度上简化代码，但是无论如何:

The following assumes you have a second sub-menu to go with the "Numbers" main-menu item, something like I've shown here: http://jsfiddle.net/aY7wW/ - and further assumes that when you said "Restructuring the HTML is not an option" you meant that I couldn't even suggest adding attributes to associate each sub-menu with its main-menu item. To work within this restriction I've used the main-menu li element index to relate to the sub-menu ul element index (obviously this works only if the sub-menus are defined in the same order as the corresponding main-menu items). If you could add some id attributes or something it would simplify the code somewhat, but anyway:

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()延迟鼠标从主菜单隐藏子菜单.这使您有时间将鼠标移到子菜单上，如果清除，超时将被清除，因此不会被隐藏.然后，当您将鼠标移离子菜单时，它就被隐藏了.但是，由于允许鼠标在不同的主菜单项之间移动，因此在初始悬停时，我们还清除了所有突出的超时并隐藏了先前显示的子菜单，以便仅显示正确的子菜单.我已经使用了500ms的延迟，但是显然您可以将其设置为您觉得自然的任何时间.

The basic idea is to use setTimeout() to delay hiding the sub-menu on mouseout from the main-menu. This gives you time to move the mouse over the sub-menu, and if you do the timeout is cleared so it won't be hidden. Then when you move the mouse off the sub-menu it is hidden. But allowing for movement of the mouse just between the different main-menu items, on initial hover we also clear any outstanding timeout and hide previously shown sub-menus so that only the correct sub-menu will show. I've used a delay of 500ms, but obviously you can set that to whatever feels natural for you.

正在运行的演示: http://jsfiddle.net/aY7wW/

这篇关于jQuery-子菜单在主菜单的鼠标移出时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！