jQuery benutzerdefiniertes Menü

Question

Jedes jQuery-Plugin, das ich gefunden habe, basiert auf <li> Elementen, um die Menüelemente zu generieren.

Ich habe <div id = "menubutton"> Element, das die Menü-Taste und andere darstellt, nicht im Zusammenhang mit (maning es ist kein Kind) <div id = "menucontent">, die die Menüpunkte (gemischtes Material, Bilder usw.) enthält. Ich möchte, dass dieses zweite, versteckte div erscheint, wenn ich auf den Knopf klicke. Es sollte sich verstecken, wenn ich die Taste ODER verlasse, wenn ich den Inhalt div lasse, für den Fall, dass ich Elemente auswähle oder Sachen dort mache.

Nun, das ist der Code, den ich bisher habe, aber die ClearTimeout-Sache scheint nicht zu funktionieren. Irgendeine Hilfe? Ein Plugin zu zeigen, um meine Arbeit zu unterstützen, würde auch funktionieren.

Danke!

 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

löste ich das Problem mit hover insted von Mouseover/mouseout

Answer 1

Versuchen Sie folgendes:

$('#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); 
    });