jQuery Hover Menu - Lorsque vous survolez un enfant - le menu disparaît

Question

J'ai donc créé un petit survol simple, qui utilise une classe à partir d'un lien pour afficher une division en dessous. Le show/hide fonctionne bien, mais je n'arrive pas à comprendre comment le régler de telle sorte que si la souris est au dessus de la div, elle ne se cachera pas. J'ai essayé d'utiliser (this) et .hover, sans succès.

Voici mon code:

$(document).ready(function() 
{ 

    // hide all dropdown 
    $("#dropdown1").hide(); 

    //hover show dropdown 

    $(".menu-level-one").hover(
     function() { 
      $("#dropdown1").show(); 
     }, 
     function() { 
      var postTimer1 = setTimeout(function(){ $("#dropdown1").hide(); }, 1000);   
     } 
    ); 
}); 

Answer 1

Vous pouvez utiliser clearTimeout(postTimer1) pour arrêter le chronomètre d'exécuter. Donc, si l'utilisateur survole #dropdown1, effacez la minuterie.

Peut-être quelque chose comme ceci:

$(document).ready(function() { 
    var hideTimer = null 
    var dropdown = $("#dropdown1", this) 
    var menu = $(".menu-level-one", this) 

    dropdown.hide(); 

    $([dropdown[0], menu[0]]).hover(
    function() { 
     if (hideDropdownTimer) 
     clearTimeout(hideDropdownTimer); 

     dropdown.show(); 
    }, 
    function() { 
     if (hideDropdownTimer) 
     clearTimeout(hideDropdownTimer); 

     hideDropdownTimer = setTimeout(function() { 
     dropdown.hide() 
     }, 300) 
    } 
) 
})