Aide nécessaire avec la fonctionnalité de sous-menu, Timeout

Question

Je travaille sur ce menu pour un système intranet. J'ai un système de menus qui fonctionne partiellement.

J'ai ajouté le code ici: http://jsbin.com/eloxe3/8

Les éléments de menu avec un fond gris clair ont un sous-menu ... tandis que les autres ne le font pas. J'ai besoin d'aide pour faire disparaître le sous-menu après avoir survolé un lien sans sous-menu pendant 1 seconde.

J'ai cette fonction qui montre le sous-menu ... & souhaite que le nouveau code à suivre des principes similaires

$(".menu-arrow").hover(function(){ 
    $.data(this, "timer", setTimeout($.proxy(function() { 
     $(this).click(); 
    },this),500)); 
},function(){ 
    clearTimeout($.data(this, "timer")); 
}); 

... (Désolé les utilisateurs de cet intranet sont novices ... juste au cas où ils capotage acidentally un lien)

Toute aide est très appréciée, Merci

Answer 1

regardant la source que vous devez lier no-submenu avec un état de vol stationnaire.

$('.no-submenu').bind('mouseenter',function(){ 
    //at this point the mouse is over a link with no submenu. 
    //So we close all submenus 
    $('.rtmenu').hide().delay(1000); 
}) 

Im retard météo incertain travaillerait avec hide mais vous pouvez lui donner un aller, si elle ne puis pas les opérations suivantes:

$('.no-submenu').bind('mouseenter',function(){ 
    //at this point the mouse is over a link with no submenu. 
    //So we close all submenus 

    var T = setTimeout(function(){ 
     $('.rtmenu').hide(); 
     clearTimeout(T); 
    },1000) 
}); 

Je peux me tromper avec cela, mais vous pouvez lui donner un tourbillon quand même.

une petite mise à jour pour clearTimeout

Essayez quelque chose le long des lignes de ce lieu:

var _TimeOut; 
$('.no-submenu').hover(,function(){ 
    var _TimeOut = setTimeout(function(){$('.rtmenu').hide();},1000) 
},function(){ 
    clearTimeout(_TimeOut); 
}); 

tout simplement pas que $('.rtmenu').hide() faudra peut-être $('.level2').hide() et vous pourriez être alittle mieux d'être spécifique avec .css('display','none')

Hover docs sont ici: http://api.jquery.com/hover/

Answer 2

Jetez un oeil à la hoverIntent plugin. Il ne se déclenche que si le curseur survole un élément.

var hideSubmenus = function() { 
    $('.rtmenu').hide() 
}; 

$(".no-submenu").hoverIntent({ 
    over: hideSubmenus, 
    out: function() { /* do nothing */ } 
}); 

De cette façon, le sous-menu ne sera pas caché si elles se déplacent accidentellement le curseur sur le menu, puis revenir rapidement à nouveau, ce qui est souvent le problème avec les sous-menus dans mon expérience.