关于悬停事件的Javascript菜单

Question

我试图做一个下拉菜单工作，当你将鼠标悬停在菜单上时，它下降，然后退出菜单，它将滚动回来。

我正在使用的网站是www.adventuresdev.info/give，菜单是标题为人员，地点，项目的选项。

现在他们都设置为。点击

这里是.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的悬停（）事件。例如，请参阅此链接以及如何使用它。 http://api.jquery.com/hover/