Небольшой вопрос по JavaScript / jQuery mouseleave

Question

Я получил этот маленький JavaScript, используя jQuery, который скользит по ul при нажатии на изображение:

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

});

Мне было интересно, смогу ли я изменить его, чтобы он распознавал, когда мышь покидает ul / image, и заставлял его скользить назад, вместо того, чтобы пользователь снова нажимал на изображение. Если бы я использовал что-то еще, кроме click (), это (естественно) применимо только к изображению и не распознает ul как объект. Есть предложения?

Answer 1

Попробуйте это

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

---

или

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

---

Используйте этот код.

Это мой обновленный код

Используйте этокод для скольжения списка, когда курсор мыши на изображении остается открытым

$(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 2

Это весь код (добавлен обмен изображениями), работающий во всех основных (обновленных) браузерах.Не очень чисто и, вероятно, можно было бы сделать проще, но это работает:

$(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 3

Вы можете использовать jquery mouseout ()