jQuery menu personnalisé

Question

chaque plugin jQuery que j'ai trouvé est basé sur <li> éléments pour générer les éléments de menu.

Je élément <div id = "menubutton"> qui représente le menu bouton et un autre, non liée (maning ce n'est pas un enfant) <div id = "menucontent"> qui contient les éléments de menu (substance mixte, images, etc.). Je veux que cette seconde div cachée apparaisse quand je clique sur le bouton. il devrait se cacher quand je laisse le bouton OU quand je laisse le contenu div, au cas où je choisis des articles ou fais des choses là. Maintenant, c'est le code que j'ai jusqu'à présent, mais la chose clearTimeout ne semble pas fonctionner. De l'aide? Montrer un plugin pour aider mon travail fonctionnerait aussi bien.

Merci!

 var timer; 

     $('#menubutton').click(function() { 
      $('#menucontent').show(); 
     }); 

     $('#menubutton').mouseout(function() { 
      timer = setTimeout('$("#menucontent").hide()', 500); 
     }); 


     $('#menucontent').mouseover(function() { 
      clearTimeout(timer); 
     }).mouseout(function() { 
      setTimeout('$("#menucontent").hide()', 300); 
     }); 

EDIT SOLUTION

Je résolu le problème en utilisant hover insted de mouseover/mouseout

Answer 1

Essayez ceci:

$('#menubutton').click(function() { 
     $('#menucontent').show(); 
    }); 

    $('#menubutton').mouseout(function() { 
     $(this).data('myTimer', setTimeout('$("#menucontent").hide()', 500)); 
    }); 

    $('#menucontent').mouseover(function() { 
     clearTimeout($(this).data('myTimer')); 
    }).mouseout(function() { 
     setTimeout('$("#menucontent").hide()', 300); 
    });