悬停事件上的 Javascript 菜单

Question

我正在尝试使下拉菜单起作用，当您将鼠标悬停在菜单上时，它会下降，然后在退出菜单时它会向上滚动。

我正在工作的网站是 www.adventuresdev.info/give，菜单是标题为人物、地点、项目的选项。

现在它们设置为 .click

这是 .js 信息

$(document).ready(function () 
{
    $('img.menu_class').click(function () 
        {
            $('ul.the_menu').slideToggle('medium');
        });
    $('img.menu_class2').click(function () 
        {
            $('ul.the_menu2').slideToggle('medium');
        });
        $('img.menu_class3').click(function () 
        {
            $('ul.the_menu3').slideToggle('medium');
        });
        $('img.menu_class4').click(function () 
        {
            $('ul.the_menu4').slideToggle('medium');
        }); 
});

Answer 1

使用 jQuery 的 hover() 功能。

语法:.hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.

为此更改您的代码:

$(document).ready(function () 
{
    $('img.menu_class').hover(function(){$('ul.the_menu').slideToggle('medium');},function(){$('ul.the_menu').slideToggle('medium');});
    $('img.menu_class2').hover(function(){$('ul.the_menu2').slideToggle('medium');},function(){$('ul.the_menu2').slideToggle('medium');});
    $('img.menu_class3').hover(function(){$('ul.the_menu3').slideToggle('medium');},function(){$('ul.the_menu3').slideToggle('medium');});
    $('img.menu_class4').hover(function(){$('ul.the_menu4').slideToggle('medium');},function(){$('ul.the_menu4').slideToggle('medium');});
});

问候