Question

我创造了一个小提琴

jsfiddle.net/ExaLM/1

现在子导航栏正在关闭鼠标离开事件。

但如果我将鼠标悬停在子链接栏上，则子链接栏也会关闭。

那么我应该在代码中做些什么改变呢？

代码是

          $(document).ready(function(){                     
    $("#main-nav li a.main-link").hover(function(){  

        $("#main-nav li a.main-link").removeClass("active");                                                   
        $(this).addClass("active");                                        
        $("#sub-link-bar").animate({  
            height: "40px"                       
        });  
        $(".sub-links").hide();  
        $(this).siblings(".sub-links").fadeIn();  
    });  
    $("#main-nav li a").mouseleave(function(){  
        $("#main-nav li a.main-link").removeClass("active");                                                                                       
        $(".sub-links").fadeOut();  
        $("#sub-link-bar").animate({  
            height: "10px"                       
        });       

    });   
});

Answer 1

我更新了您的Fiddle

基本上，你想要的是避免在触发mouseleave事件时隐藏元素。为此，您可以绑定a.main-link及其<ul>元素，或者您可以像我一样绑定：在整个<li>上绑定您的jQuery事件，以便{{1}在您离开主链接或子链接之前，不会触发它，因为它包含在整个mouseleave中。我必须将<li>更改为hover以避免重复触发。

我还必须添加一些.stop()以避免动画在每次鼠标离开菜单时完全重复并在最终停止之前反弹几次。您还应该删除mouseenter，因为有时快速移动鼠标时，隐藏元素时它们仍然可见，并使其看起来不稳定。

我希望这足以让您了解如何修复菜单。

javascript在悬停时保持子导航栏打开

1 个答案: