jQuery .hover() me rend fou

Question

j'ai un projet qui utilise des menus déroulants qui sont imbriqués ul de, comme ceci:

<ul id="nav"> 
    <li id="thome" class="navtab"> 
    <a href="#" class="navlink lhome" id="nav_home" onclick="doCurrent('home');">HOME</a> 
     <ul id="subnav_home" class="submenu"> 
     <li><a href="#">Dashboard</a></li> 
     <li><a href="#">SMS</a></li> 
     <li><a href="#">Email</a></li> 
     <li><a href="#">Twitter</a></li> 
     </ul> 
    </li> 
</ul> 

En utilisant jQuery, j'ai ajouté un .hover() à le .navtab li que .show() s le .submenu ul. Le problème est que lorsque le curseur se déplace dans le nouveau ul, le .hover() - out pour les feux de .navtab, .hide() dans le sous-menu, en dépit du fait que j'ai la hauteur de la li afin qu'il enveloppe entièrement le .submenu ul.

J'ai essayé d'ajouter un délai au fichier .hide(), mais si vous passez rapidement votre curseur sur la barre de navtab, vous obtenez tous les sous-menus en même temps.

Des solutions pour moi? Voici le Javascript approprié. La fonction hide() est identique à .show() sauf qu'elle rétrécit la hauteur et cache l'ul (évidemment).

$('.navtab').hover(
     function(){ 
      tabShowSubnav($(this).attr('id')); 
     }, 
     function(){ 
      tabHideSubnav($(this).attr('id')); 
    }); 

function tabShowSubnav(menu){ 

    var sb = '#' + menu + ' > .submenu'; 
    var tb = '#' + menu; 
    $('.navtab').each(function(){ 
     if (!$(this).hasClass('current_page')){ 
      $(tb).addClass('nav_hover'); 
     } 
    }); 
    $(tb).css('height','239px');  
    $(sb).show(); 
} 

Answer 1

J'ai finalement dû utiliser le plugin hoverIntent de jQuery, qui ignore les enfants dans le but de la sortie de la souris.

Answer 2

$('.navtab').hover(
    function() { 
     $(this).children(".submenu").show().children('.current_page').addClass("nav_hover"); 
    }, 
    function() { 
     $(this).children(".submenu").hide(); 
    }); 

Cela a fonctionné pour moi.

Answer 3

$('.navtab').hover(
     function() { 
        $(this).children(".submenu").show().children('current_page').addClass("nav_hover"); 
     }, 
     function() { 
     }); 

    $(".submenu").mouseout(function(){ 
     $(this).hide(); 
    });