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

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');});