javascript - 子菜单消失并且不允许我点击链接

Question

我创建了一个带有子菜单的导航栏，该菜单延伸了整个页面的宽度，我可以将鼠标悬停在列表项上以显示菜单。但是当我将鼠标向下移动到子菜单时，它就消失了。一旦我将鼠标指针从列表项上移开并将其向下移动到子菜单中，子菜单就会向上滑动。

我想要的是当用户将鼠标悬停在列表项和菜单上时子菜单可见，以便子菜单中的元素可以是可点击的链接。因此，如果将鼠标指针向下移动到子菜单上，它会保持可见，因此可以单击链接。

这是我应用的当前 jQuery，它可以为“男性”、“女性”和“青年”显示子菜单:

$('#men').hover(function(){
    $('#men_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#men_submenu').stop(true, false).slideUp('400');
});
$('#women').hover(function(){
    $('#women_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#women_submenu').stop(true, false).slideUp('400');
});
$('#youth').hover(function(){
    $('#youth_submenu').stop(true, false).slideDown('400');
}, function(){
    $('#youth_submenu').stop(true, false).slideUp('400');
});

这是 JSFIDDLE:http://jsfiddle.net/RBlair/rLdtse86/10/

谢谢

Answer 1

您已在悬停父元素时立即调用“退出”函数。

jquery 中的 .hover 函数做两件事，第一部分是当您悬停在元素上时，第二部分是当您“取消悬停”时。所以

$('#men').hover(function(){
        $('#men_submenu').stop(true, false).slideDown('400');
            $('#women_submenu').stop(true, false).slideUp('400');
        $('#youth_submenu').stop(true, false).slideUp('400');
    });

上面这部分只调用了第一部分，即它只为悬停部分添加了功能，为了关闭我们使用的子菜单

$('#men_submenu').hover(function(){},function(){
        $('#men_submenu').stop(true, false).slideUp('400');
        $('#women_submenu').stop(true, false).slideUp('400');
        $('#youth_submenu').stop(true, false).slideUp('400');});

如果您注意到上面的第一个 function() 是留空的，那么当鼠标悬停在它上面时不会执行任何操作，但是当鼠标移出它时，所有子菜单都是“隐藏的”。

我已经修改了您的代码以证明这一点(不会称这是一个干净/最好的解决方案，但要说明这一点)

http://jsfiddle.net/rLdtse86/14/

$('#men').hover(function(){
    $('#men_submenu').stop(true, false).slideDown('400');
        $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');
});
$('#women').hover(function(){
    $('#women_submenu').stop(true, false).slideDown('400');
        $('#men_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');
});
$('#youth').hover(function(){
    $('#youth_submenu').stop(true, false).slideDown('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#men_submenu').stop(true, false).slideUp('400');});
$('#men_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});
$('#women_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});
$('#youth_submenu').hover(function(){},function(){
    $('#men_submenu').stop(true, false).slideUp('400');
    $('#women_submenu').stop(true, false).slideUp('400');
    $('#youth_submenu').stop(true, false).slideUp('400');});