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

Jquery 如何在鼠标位于下拉菜单中的子菜单时使父菜单保持悬停状态,jquery,menu,hover,Jquery,Menu,Hover,大家好,我想知道在子菜单中移动鼠标时如何保持父菜单悬停 我是jQuery的初学者,希望您能帮我提供一些提示/建议 jQuery代码 // Navigation Slide // var navHover = function () { $("#S" + this.id).animate({top: '-40px'}, 300, 'swing') $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddin

大家好,我想知道在子菜单中移动鼠标时如何保持父菜单悬停

我是jQuery的初学者,希望您能帮我提供一些提示/建议

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>


  • 问题在于顶级悬停在元素上。移动到子菜单会在元素上触发mouseleave事件,因为子菜单元素不是的子菜单元素,而是
  • 的子菜单元素。请尝试以下方法:

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

    顺便说一句,您可以在hover函数中使用$(this)来简化navHover/navRelease代码。这样,您就不需要元素上的特定ID。您只需要相对于当前元素找到它们。

    您根本不需要JS。以下是有关解释的详细信息:

    仅当您将鼠标悬停在
    li
    上时,才希望显示
    ul
    的子级。由
    li-ul
    (鼠标移出状态)和
    li:hover-ul
    (鼠标越过状态)处理

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



    如果你想要一些动画,看看CSS转换。浏览器支持是参差不齐的,但也许你尝试做的事情将得到普遍支持。准确判断区域发生变化的元素上的鼠标溢出/移出事件可能很棘手。我建议只有在你真的需要的时候才使用JS来做类似的事情。

    菜单不错!你能在这里发布相关的html、css和jQuery吗?或者作为一把小提琴,这样我们可以更好地帮助你?好的,我添加代码^^^希望它能帮助你^^^谢谢。问题是绿色滑块的动画谢谢你的回答,我有点小问题,但是移动id解决了^^