ホバリングイベントのJavascriptメニュー

Question

私はドロップダウンメニューを作成しようとしています。メニューの上にマウスを置くとドロップダウンし、メニューを終了するとスクロールアップします。

私が取り組んでいるサイトはwww.adventuresdev.info/giveで、メニューはpeople、places、projectsというオプションです。今、彼らはここで

を.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のホバー（）イベントを使用してください。たとえば、このリンクとその使用方法を参照してください。 http://api.jquery.com/hover/