小的JavaScript/jQuery的鼠標離開的問題

Question

我使用jQuery是向下滑動點擊圖像時的UL這個小的JavaScript：

$(document).ready(function() { 
$('img.menu_class').click(function() { 
$('ul.the_menu').slideToggle('medium'); 
}); 

}); 

我在想，如果我可以修改它，當鼠標離開UL認可/圖像，並使其滑回，而不是讓用戶再次單擊該圖像。如果我使用的不是click（），它會（自然地）僅適用於圖像，並且不會將ul識別爲對象。有什麼建議麼？

Answer 1

這是整個代碼（增加了一些圖像交換到整個事情），目前在所有主流（更新）的瀏覽器上工作。不是很乾淨，可能可以做得更容易，但它的工作原理：

$(document).ready(function() { 

$('ul.menu_body').hide(); 

if ($.browser.msie && $.browser.version < 8) { 

    $('.dropdown').click(function() { 
     if ($('ul.menu_body').is(':hidden')) { 

      $('ul.menu_body').fadeIn('medium'); 
      $('.menu_head').attr("src", "layout/buttonhover.png"); 
      $('.menu_body').css("font-weight","normal"); 


     } else if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    }); 

} else { 

    $('.dropdown').click(function() { 
     if ($('ul.menu_body').is(':hidden')) { 
      $('ul.menu_body').fadeIn('medium'); 
      $('.menu_head').attr("src", "layout/buttonhover.png"); 

     } else if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    }); 

    $('.dropdown').mouseleave(function() { 
     if ($('ul.menu_body').is(':visible')) { 
      $('ul.menu_body').fadeOut('medium'); 
      $('.menu_head').attr("src", "layout/servbtn.png"); 
     } 
    });  

    } 

}); 

Answer 2

你可以使用jQuery mouseout()

Answer 3

試試這個

$（ 'img.menu_class'）。綁定（ '鼠標離開'，函數（）{ $（ 'ul.the_menu'）。 slideToggle（'medium'）; }）;

---

或

$（ 'img.menu_class'）結合（ '懸停'，函數（）{ $（ 'ul.the_menu'）的slideToggle（ '媒介'）;} 。 ）;

---

使用此代碼。

這是我更新的代碼

使用此代碼來了slideDown圖像烏爾名單一旦鼠標懸停並保持打開

 
$(document).ready(function() { 

$('img.menu_class').bind('hover mouseleave',function() { 
$('ul.the_menu').slideDown('medium'); 
}); 

//to close ul 

$('#id_of_close_element').bind('click',function() { 
$('ul.the_menu').slideUp('medium'); 
}); 

});