下拉菜单在进入链接之前消失了

Question

看一下此页面菜单中的游览链接。 当我将鼠标悬停在巡视上时，它应该显示菜单并让我选择要单击的子菜单，但是它消失得太快了。

这是菜单的代码：

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);

有人知道为什么会这样吗？

Answer 1

看起来像这样简单：

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

或者，对于智障老板：

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

Answer 2

150毫秒是很短的时间范围。 请改用更长的时间范围。

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

您可能还希望在将鼠标悬停在子菜单上时保持其淡入淡出状态。您需要更改选择器（仅引用整个列表项，而不是仅引用链接）。

样品
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();

$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

Answer 3

尝试

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

Answer 4

除了尝试使用悬停外，您还可以尝试在鼠标悬停时淡入并在鼠标悬停时淡出。 这可能会更好地适合您的情况，并让您更好地控制每个单独的事件。 查看此处发布的示例。

Answer 5

如果将鼠标指针停留在“游览”链接上，您会发现它不会消失。 但是，当您将鼠标从a元素移开时，它会像预期的那样逐渐消失。

如果您将悬停与父li元素一起使用，则它将对整个容器都有效，该容器既包含“ tour”链接，也包含您正在淡入的子菜单。