javascript - jQuery 菜单淡出但仍在链接上

Question

我有一个 jQuery DropDown 菜单，它似乎可以很好地解决一个小而烦人的问题。当您随机将鼠标悬停在菜单上时，子菜单将淡出。并不总是，只是随机的。其他时候子菜单似乎显示得很好。所以子菜单只会随机消失。我不太了解 jQuery，所以我希望有人能看到我做错了什么。谢谢!

代码:

$(document).ready(function(){
$('#solutions-btn').hover(function(){
    $('#solutions-drop').css('display','block');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#quality-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','block');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#american-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','block');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','none');
});

$('#products-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','block');
    $('#about-drop').css('display','none');
});

$('#about-btn').hover(function(){
    $('#solutions-drop').css('display','none');
    $('#quality-drop').css('display','none');
    $('#american-drop').css('display','none');
    $('#products-drop').css('display','none');
    $('#about-drop').css('display','block');
});

var timer;
$('#main-menu a').hover(function(){
    $('#drop-menu').fadeIn( 200 );
},function(){
    timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});

$('#drop-menu').hover(function(){
    clearTimeout(timer);
},function(){
    $('#drop-menu').fadeOut( 200 );
});

});

JS fiddle 链接: http://jsfiddle.net/20wfqzxz/

将鼠标悬停在底部的链接上。将它们悬停一秒钟，您会发现即使在链接上它们也会消失。

Answer 1

您需要将代码编辑为:

var timer;
$('#main-menu a').hover(function(){
    $('#drop-menu').fadeIn( 200 );
    clearTimeout(timer);
},function(){
    timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});

$('#drop-menu').hover(function(){
    clearTimeout(timer);
},function(){
    $('#drop-menu').fadeOut( 200 );
});

Fiddle ..希望有帮助..