懸停/淡出的摺疊菜單

Question

這是我試過的：http://jsfiddle.net/MRMr4/2/

當然有一個問題。

正如您所看到的，當我將鼠標移動到正下方顯示的部分時，該部分消失。我如何更改我的jQuery，所以這部分只在鼠標移出#menu或＃產品時消失？

$('#menu').hover(function(){ 
    $('#products').fadeTo('fast', 1); 
}, function(){ 
    $('#products').fadeTo('fast', 0); 
}); 

$('#products').mouseover(function(){ 
    $('#products').show(); 
}).mouseout(function(){ 
    $('#products').fadeTo('fast', 0); 
}); 

Answer 1

這種方法使用超時來延遲產品窗口的合攏。這將允許您將鼠標從菜單移動到您的產品窗口，而不會摺疊在您的身上...！

$('#menu').mouseenter(function() { 
    $('#products').fadeIn(100); 

    var timeout = null; 

    // Set timeout to delay collapse of product window 
    $(this).mouseleave(function() { 
     timeout = setTimeout(collapse, 300); 
    }); 

    // Cancel the collapse event if product window is entered 
    $('#products').mouseenter(function() { 
     clearTimeout(timeout); 
    }).mouseleave(function(){ 
     collapse(); 
    }); 
}); 

function collapse() { 
    $('#products').fadeOut(100); 
} 

看看your updated fiddle。