0

2 つのナビゲーション レベルを同期して、jQuery でオンとオフを表示することができました。効果がうまく機能するように、ユーザーが両方のレベルの外にマウスを移動するようにします。ただし、これは私のナビゲーションの最初の「li」でのみ機能するようです。何かご意見は？ここにフィドルがあります：

jsfiddle

と私のコード:

//Maintain over state for main nav and sub nav
$('#mainNav li').mouseover(function(){  
    $(this).children("a").removeClass("whiteHighlight");
    if($('#mainNav li span').css('display') == "block"){ 
        $(this).children("a").addClass("whiteHighlight");
    }
}); 
//Remove over state for both when exiting sub nav
$('#mainNav li span').mouseout(function(){      
    if($('#mainNav li span').css('display') == "none"){ 
        $(this).prev().removeClass("whiteHighlight");
    }       
}); 
//Remove over state for both when exiting main nav
$('#mainNav li').mouseout(function(){       
    if($('#mainNav li span').css('display') == "none"){ 
        $(this).children("a").removeClass("whiteHighlight");
    }       
});
4

2 に答える 2

0

マウスアウトで、if($('#mainNav li span').css('display') == "none") をチェックしています。このスパンは、ユーザーが離れたばかりの li 内のスパンを参照していません。 、 #mainNav のすべての li に存在するすべてのスパンの配列を参照します。

とにかく、これには JS は必要ありません。JS なしで修正しました。この CSS を追加しただけです。

#mainNav li:hover {background:#fff;}
#mainNav li:hover a {color:#333;}

http://jsfiddle.net/jamesking/ScvpL/2/

于 2013-04-09T15:03:02.287 に答える