子导航 div 一直隐藏

Question

我有一个令人讨厌的导航问题，但似乎无法让它工作。当鼠标悬停在主导航 div 中的

项上时，根据子导航显示。 但当它悬停在它们上方时，它不会保持活动类状态。当选择主导航-li 时，子导航应保留。当离开子导航时，最初的子导航应该重新出现。

请注意，我们在 document.ready 函数（在另一个 PHP 包含文件中定义）之后加载了一个活动子导航。

在此非常感谢任何帮助。我迷路了:-)

所有主要的 li-navigation 项目都在这里：

<div id="navigation-main">
    <div id="mainnav"> 
    <div class="navigation-items">
        <ul> 
        <li id="mainnav1" class="active"><a href="#" id="header">Button 1</a></li> 
        <li id="mainnav2"><a href="#">Button 2</a></li> 
        <li id="mainnav3"><a href="#">Button 3</a></li> 
        <li id="mainnav4"><a href="#">Button 4</a></li> 
        </ul> 
    </div> 
    </div> 
</div> 

细分是：

<div id="navigation-sub1" class="navigation-sub">navigation-sub 1  active</div> 
<div id="navigation-sub2" class="navigation-sub">navigation-sub 2 active</div> 
<div id="navigation-sub3" class="navigation-sub">navigation-sub 3 active</div> 
<div id="navigation-sub4" class="navigation-sub">navigation-sub 4 active</div> 

这是到目前为止我的代码......

$(document).ready(function() { 

    var activeId = $(".active").attr("id").replace("mainnav",""); 
    $("#navigation-sub" + activeId).show();

    $("#mainnav a").hover(function() { 
        //reset 
        $(".navigation-sub").hide(); 
        $("#mainnav .active").removeClass("active"); 

        //act 
        $(this).addClass("active") 
        var id = $(this).closest("li").attr("id").replace("mainnav",""); 
        $("#navigation-sub" + id).show();

    }); 

    $("#mainnav").mouseout(function() {
        $(".navigation-sub").hide(); 
        $("#navigation-sub" + activeId).show();
    }); 

}); 

Answer 1

您必须将 .navigation-sub 移动到 mainnav 中，才能将其隐藏在 mainnav 的 mouseleave 上。另外，当我认为你的意思是 mouseleave 时，你正在使用 mouseout：

http://jsfiddle.net/Q3YpU/5/

我希望这能解决您的问题！