1

厄介なナビゲーションの問題がありますが、動作させることができないようです。<li>mainnav divの項目にカーソルを合わせると、サブナビゲーションが表示されます。ただし、それらの上にカーソルを合わせると、アクティブなクラス状態に留まりません。mainnav-li が選択されている場合、subnav はそのままにしておく必要があります。サブナビから移動すると、最初のサブナビが再び表示されるはずです。

document.ready 関数 (別の 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>

サブディビジョンは次のとおりです。

<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

のmouseleaveで非表示にするに.navigation-subは、をに移動する必要があります。また、mouseleaveを意味していると思うときは、mouseoutを使用していました。mainnavmainnav

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

これで問題が解決することを願っています。

于 2011-10-28T11:51:35.850 に答える