關於懸停事件的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/