下拉悬停问题（jQuery）

我做了一个简单的下拉菜单，这工作正常，但我想在按钮和下拉菜单之间（底部按钮/链接和顶部下拉菜单之间）添加一些空间。下拉悬停问题（jQuery）

问题是，如果我不添加按钮和下拉菜单之间的空间它工作正常，但一旦我增加他们之间的空间下拉菜单回去隐藏一旦我离开按钮。

我可以让悬停在li上，但李有风格附加到它，所以我不能做很多与此（也是一个元素有固定的样式附加到它）。

那么，如果我将鼠标悬停在其父母li上，我如何才能让下拉菜单保持活跃状态？

jQuery代码

$('#sub-menu li').hover(function(){ 
     $(this).children('ul').stop(true,true).fadeIn(100); 
    },function(){ 
     $(this).children('ul').stop(true,true).fadeOut(100); 
    });

基本的HTML代码

<div> 
    <ul> 
     <li><a href="#">link</a> 
      <ul> 
       <li>dropdown menu</li> 
       <li>dropdown menu</li> 
       <li>dropdown menu</li> 
      </ul> 
     </li> 
    </ul> 
</div>

来源

2011-05-24 user759235

你可以包括你的CSS和什么是你正在做的添加空间（保证金，填充绝对位置等。）？ – 2011-05-24 18:28:14

你也许可以在悬停的主列表中添加一个边框底部。使它变厚并且与标题背景颜色相同，因此它将充当您在下拉菜单和菜单按钮之间所需的填充。我还没有检查过它。 – 2011-05-24 18:35:07

哪里是按钮，你为谁分配'ID =“子菜单”'; 'ul'或'div' – diEcho 2011-05-24 18:40:06

做到这一点的典型方法是设置一个计时器，收于母公司的鼠标离开事件的子菜单，但取消定时器如果你mouseenter子菜单。将此计时器设置为150-250毫秒通常会给中等移动速度慢的鼠标留出足够的时间以保持预期的行为，但当菜单为打算关闭时，感觉不会太差。

没有测试，更像是伪代码，只是为了显示的一般方法：

var submenuTimer = null; 

$('#sub-menu li') 
    .mouseenter(function(){ 
     $(this).children('ul').stop(true,true).fadeIn(100); 
    }) 
    .mouseleave(function{ 
     submenuTimer = 
     setTimeout(
     function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200 
     ); 
    }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });

来源

2011-05-24 18:57:07 RwwL

我想我明白了，虽然CSS将是非常有益这里。我相信你的孩子ul有position:abosolute，你有一个hover在母公司li。当两者在一起时，您可以在不离开li的情况下将鼠标从一个移动到另一个，但是一旦您在两者之间留下间隙，将鼠标从链接移动到ul菜单将使父li导致mouseleave触发。

我可能会处理这个问题的方式如下。而不是重新定位孩子ul，将ul包装在一个div中。在div上放一个padding-top，尽可能多的空间，你想要的。然后移动所有的定位CSS和jQuery的东西来显示/隐藏/定位div。通过这种方式，从链接到菜单ul不会触及空白区域并隐藏，而是移动到仍为父级li的一部分的透明区域，菜单不会隐藏。

希望帮助，再次css将有助于看到你在做什么。

编辑：创建一个小提琴来演示这个想法。第一个链接显示问题，第二个显示修正，带有边框以显示实际发生的情况，第三个是实际修复。

http://jsfiddle.net/fTmLh/

来源

2011-05-24 18:57:19

答案很简单，只是增加了底部填充在<LI>标签为顶级链接。创建一个新类专门为他们或增加它的即时，就像这样：

<li style="padding-bottom: 8px;">

来源

2013-01-09 15:16:39 Dave

下拉悬停问题（jQuery）

回答

相关问题