Question

我有一个讨厌的导航问题，但似乎无法让它工作。根据子导航显示，将鼠标悬停在mainnav div中的<li>个项目上时。但是当它悬停在它们上面时它不会保持活跃的类状态。选择mainnav-li时，subnav应该保留。离开subnav时，初始的subnav应该重新出现。

请注意我们在document.ready函数之后加载一个活动的subnav（在另一个PHP中定义）。

这里非常感谢任何帮助。我迷路了： - ）

所有主要的导航项目都在这里：

<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>

The Subdivs是：

<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的鼠标上隐藏它。另外，你使用mouseout，当我认为你的意思是mouseleave：

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

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

子导航div保持隐藏

1 个答案: