Kleine JavaScript/jQuery mouseleave Frage

Question

Ich habe diese kleine JavaScript jQuery verwenden, die ein ul nach unten gleitet, wenn ein Bild geklickt wird:

$(document).ready(function() { 
$('img.menu_class').click(function() { 
$('ul.the_menu').slideToggle('medium'); 
}); 

}); 

ich mich gefragt, ob ich es ändern könnte zu erkennen, wenn die Maus den ul verlässt/image und lassen Sie es zurückgleiten, anstatt dass der Benutzer erneut auf das Bild klickt. Wenn ich etwas anderes als click() verwende, würde dies (natürlich) nur für das Bild gelten und die ul nicht als Objekt erkennen. Irgendwelche Vorschläge?

Answer 1

Dies ist der gesamte Code (hinzugefügt einige Bild Swapping die ganze Sache), arbeitet in allen wichtigen (aktualisierten) Browsern im Moment. Nicht sehr sauber und wahrscheinlich könnte einfacher gemacht werden, aber es funktioniert:

$(document).ready(function() { 

$('ul.menu_body').hide(); 

if ($.browser.msie && $.browser.version < 8) { 

    $('.dropdown').click(function() { 
     if ($('ul.menu_body').is(':hidden')) { 

      $('ul.menu_body').fadeIn('medium'); 
      $('.menu_head').attr("src", "layout/buttonhover.png"); 
      $('.menu_body').css("font-weight","normal"); 


     } else if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    }); 

} else { 

    $('.dropdown').click(function() { 
     if ($('ul.menu_body').is(':hidden')) { 
      $('ul.menu_body').fadeIn('medium'); 
      $('.menu_head').attr("src", "layout/buttonhover.png"); 

     } else if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    }); 

    $('.dropdown').mouseleave(function() { 
     if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    });  

    } 

}); 

Answer 2

Sie jquery mouseout()

Answer 3

testen

$ ('img.menu_class') verwenden können. Binden ('mouseleave', function() { $ ('ul.the_menu'). slideToggle ('mittel'); });

---

oder

$ ('img.menu_class') bind ('Hover', function() { $ ('ul.the_menu') slideToggle ('mittel'). }.);

---

Verwenden Sie diesen Code.

Dies ist meine aktualisierte Code

verwenden Code ur Liste einmal Mausbewegung auf das Bild, um slidedown und bleibt offen

 
$(document).ready(function() { 

$('img.menu_class').bind('hover mouseleave',function() { 
$('ul.the_menu').slideDown('medium'); 
}); 

//to close ul 

$('#id_of_close_element').bind('click',function() { 
$('ul.the_menu').slideUp('medium'); 
}); 

});