如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

Question

大家好，我想知道如何在子菜单中移动鼠标的同时保持父菜单的悬停状态。

我是jQuery的初学者，我希望您能给我一些提示/建议。

LINK TO MENU WEBSITE

jQuery代码

// Navigation Slide //
var navHover = function () {
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
}
var navRelease = function () {
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
}

$('#navInside a.topLevel').hover(navHover, navRelease);


// Dropdown animation       
            function mainmenu(){
            jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix
            jQuery(" #navInside li").hover(function(){
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500);
                    },function(){
                    jQuery(this).find('ul:first').css({visibility: "hidden"});
                    });
            }

             jQuery(document).ready(function(){                 
                mainmenu();
            });

导航HTML

<div id="navInside">
<li><a class="topLevel" href="">Home</a></li>
<li><a class="topLevel" href="">Options</a>
    <ul>
      <li><a href="">Submenu 1</a></li>
      <li><a href="">Submenu 2</a></li>
    </ul>
</li>
<li><a class="topLevel" href="">Thanks</a></li>

​

Answer 1

问题是您的顶级鼠标悬停在元素上。移动到子菜单会导致在元素上触发mouseleave事件，因为子菜单元素不是的子项，而是。试着这样做：

$('#navInside a.topLevel').parent().hover(navHover, navRelease);

顺便说一下-您可以通过在hover函数中使用$(this)来简化navHover/navRelease代码。这样您就不需要元素上的特定ids了。您只需找到与当前元素相关的元素。

Answer 2

你根本不需要JS来做这件事。下面是jsFiddle的解释：

您希望仅在将鼠标悬停在li的上方时才显示它的子级ul。这由li ul (mouseout状态)和li:hover ul (mouseover状态)处理。

当您将鼠标悬停在它上面时，LI的高度会发生变化，因为您现在也在显示UL，所以只要您不离开它的(LIs)区域(包括它的文本+ UL)，它就会保持可见。

如果你想要一些动画，看看CSS过渡。浏览器的支持参差不齐，但也许你想做的事情会得到普遍的支持。准确判断区域正在变化的元素上的鼠标悬停/移出事件可能很棘手。我建议只有当你真的需要这样做的时候才使用JS。