下拉悬停问题（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< /code> 菜单离开父 li 导致 mouseleave 触发。

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

希望有帮助，再次 css 将有助于准确了解您在做什么。

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

http://jsfiddle.net/fTmLh/

Answer 3

简单的答案是仅增加顶级链接的

标记中的底部填充。专门为他们创建一个新类或动态添加它，如下所示：

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