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（ '媒介'）。 }）;

或

$（'img.menu_class'）。bind（'hover'，function（）{ $（ 'ul.the_menu'）的slideToggle（ '媒介'）。 }）;

使用此代码。

这是我的更新代码

将鼠标悬停在图片上并使其保持打开状态后，使用此代码显示列表

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

这是整个代码（添加了一些图像交换到整个内容），目前在所有主要（更新的）浏览器上工作。不是很干净，可能会更容易，但它的工作原理：

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

   }

});

小JavaScript / jQuery mouseleave问题

3 个答案: