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

我创作了一把小提琴

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"                       
        });       

    });   
});  

我更新了你的

基本上，您希望避免在触发mouseleave事件时隐藏元素。要做到这一点，您可以在

a.main-link

及其

元素上进行绑定，也可以像我一样进行绑定：在整个
上绑定jQuery事件，这样
mouseleave
在您离开主链接或子链接之前不会被触发，因为它包含在整个
中。我不得不将
hover
更改为
mouseenter
，以避免它被反复触发

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

我希望这足以让您了解如何修改菜单。
mouseenter是一个成功的举动！