当鼠标悬停时，jQuery下拉菜单就会消失 [英] jQuery Dropdown Menu goes away when mouseout

问题描述

我试图通过CSS来获取世界上最简单的下拉列表，并希望通过jQuery将其动画化一点。但是jQuery中的hover功能使得下拉菜单在离开触发元素（ul＃menu li a）后立即消失，因此您无法从下拉列表中选择任何内容。

您可以在这里查看代码和相关问题：
http://jsfiddle.net/Xx2Z7/

我正在尝试所有的东西，在网上搜索，只是发现很多人都有这个问题，但没有一个解决方案适用于我，我正在寻找最简单和最清晰的代码。

谢谢。

解决方案

p>这里是：

jsFiddle

基本上，我更改了js事件，现在动画只由你的li元素的mouseenter和mouseleave控制。
li包含子菜单，因此即使离开链接的区域，子菜单仍然可见。

  $（document）.ready（function（）{
 
 //菜单
 $（'ul.menu'）。hide（）; 
 
 $（ 'ul＃main-nav li'）。mouseenter（function（）{
 $（'ul.menu'，this）.animate（{opacity：'show'}，'slow'）; 
 }}; 
 
 $（'ul＃main-nav li'）。mouseleave（function（）{
 $（'ul.menu'，this）.animate（{opacity：隐藏'}，'fast'）; 
}）; 
 
}）; 
  

I am trying to achive the simplest Dropdown in the world with CSS and would like to animate it a little with jQuery. But the "hover" function in jQuery makes the dropdown disappear as soon as it leaves the trigger element (ul#menu li a), so you cannot select anything from the dropdown.

You can see the code and the related problem here: http://jsfiddle.net/Xx2Z7/

I am trying everything and searching everywhere on the net, only to find out that many others got this problem, but none of the solutions work for me, and I am looking for the simplest and clearest code.

Thanks.

解决方案

Here it is:

jsFiddle

Basically, I changed your js events, the animation is now controlled only by the mouseenter and mouseleave of your li element. The li contains the submenu, so the submenu will remain visible even when you leave the area where the link is.

$(document).ready(function() {

  // Menus
  $('ul.menu').hide();

  $('ul#main-nav li').mouseenter(function() {
      $('ul.menu', this).animate({opacity: 'show'}, 'slow');
  });

  $('ul#main-nav li').mouseleave(function() {
       $('ul.menu', this).animate({opacity: 'hide'}, 'fast');
  });

});​

这篇关于当鼠标悬停时，jQuery下拉菜单就会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！