Small JavaScript/jQuery mouseleave question

Question

I got this small JavaScript using jQuery that slides down a ul when an image is clicked:

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

});

I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?

Answer 1

您可以使用jQuery mouseout（）

Answer 2

Try this

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

---

or

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

---

Use this code.

This is my updated code

Use this code to slidedown ur list once mouse hover on image and remains open

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

});

Answer 3

This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:

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

   }

});