javascript - 小型 JavaScript/jQuery mouseleave 问题

Question

我使用 jQuery 获得了这个小的 JavaScript，当单击图像时它会向下滑动 ul：

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

});

我想知道是否可以修改它以识别鼠标何时离开 ul/图像并使其向后滑动，而不是让用户再次单击图像。如果我使用 click() 以外的其他东西，它将（自然）仅适用于图像并且不会将 ul 识别为对象。有什么建议么？

Answer 1

你可以使用 jquery mouseout()

Answer 2

试试这个

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

---

或者

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

---

使用此代码。

这是我更新的代码

一旦鼠标悬停在图像上并保持打开状态，请使用此代码向下滑动您的列表

$(文档).ready(函数 () {

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

//关闭ul

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

});

Answer 3

这是整个代码（在整个代码中添加了一些图像交换），目前在所有主要（更新的）浏览器上都可以使用。不是很干净，可能更容易完成，但它有效：

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

   }

});