JQuery - 下拉菜单 - mouseenter / mouseleave

Question

我花了至少2个小时试图完成这项工作..

基本上我有一个包含项目的下拉菜单，我试图写一些模仿HoverIntent插件的东西，允许用户在菜单关闭前将鼠标移动到项目外一段固定的秒钟。

我写的是部分工作，但如果你试图在菜单之间移动鼠标太快，它就会“破坏”。如果你慢慢地做，一切都会按预期工作

亲自看看：

http://jsfiddle.net/DkJg8/1/

var old_item;

$(".nav_menu > li").mouseenter(function(){

        var item_selected = $("ul", this);
        // if this current item is already in process of being hidden
        var timeout = item_selected.data("timeout_hide");
        if(timeout){
            clearTimeout(timeout);
            item_selected.removeData("timeout_hide");

        } else {

            if(old_item){
                old_item.hide();
            }

            item_selected.show();
        }
});

$(".nav_menu > li").mouseleave(function(){
        var item_selected = $("ul", this);

        old_item = item_selected;

        item_selected.data("timeout_hide", setTimeout(function(){
                item_selected.removeData("timeout_hide");
                item_selected.hide();
        }, 500));
});

我该如何解决？

Answer 1

这应该这样做：

var old_item;
var timeout;

$(".nav_menu > li").mouseenter(function(){
    var item_selected = $("ul", this);
    clearTimeout(timeout);
    if(old_item){
        old_item.hide();
    }
    item_selected.show();      
});

$(".nav_menu > li").mouseleave(function(){
    var item_selected = $("ul", this);       
    old_item = item_selected;
    timeout= window.setTimeout(function(){item_selected.hide()}, 500);  
});