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

});