1

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

请注意，我们在 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();
    }); 

});
4

1 回答 1

1

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

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

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

于 2011-10-28T11:51:35.850 回答