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

此致

Answer 2

使用jquery hover（）事件。请参阅此链接以及如何使用它。 http://api.jquery.com/hover/

悬停事件的Javascript菜单

2 个答案: