下拉悬停问题（jQuery）

Question

我制作了一个简单的下拉菜单，效果很好，但我想在按钮和下拉菜单之间（在底部按钮/链接和顶部下拉菜单之间）添加一些空间。

问题是，如果我不在按钮和下拉菜单之间添加空格，它可以正常工作，但是一旦我在它们之间添加空格，一旦我离开按钮，下拉菜单就会返回隐藏。

我可以在悬停时使 li 更高，但 li 附加了样式，所以我对此无能为力（a 元素也附加了固定样式）。

那么，如果我将鼠标悬停在其父 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>   

Answer 1

执行此操作的典型方法是设置一个计时器以在父级的 mouseleave 事件上关闭子菜单，但如果您在子菜单上 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 });

Answer 2

我想我明白了，尽管 css 在这里会很有帮助。我相信你的孩子ul 有position:abosolute，而你在父母li 上有一个hover。当两者在一起时，您可以在不离开li 的情况下将鼠标从一个移到另一个，但是一旦在两者之间留出空隙，将鼠标从链接移到ul 菜单就会离开父级li导致mouseleave 触发。

我可能会处理的方式如下。不要重新定位子 ul，而是将 ul 包装在一个 div 中。将padding-top 放在 div 上，空间尽可能多。然后移动所有定位 css 和 jquery 的东西来显示/隐藏/定位 div。这样，从链接转到菜单 ul 不会碰到空白空间并隐藏，而是会移动到仍然是父级 li 的一部分的透明 div 并且菜单不会隐藏。

希望对您有所帮助，再次使用 css 可以帮助您准确了解您在做什么。

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

http://jsfiddle.net/fTmLh/

Answer 3

简单的答案是为顶级链接增加<LI> 标记中的底部填充。专门为他们创建一个新类或即时添加它，如下所示：

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