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

Question

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

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

这是我应用的当前jQuery，它使“ men”，“ women”和“ youth”都出现子菜单：

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