Блог

Я потратил не менее 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));
});
  

как я могу это исправить??

Это должно сделать это:

 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);  
});