Question

我已设法同步两个导航级别以使用jQuery显示和关闭。我希望用户将鼠标移动到两个级别之外，以使效果更好地工作。然而，这似乎只适用于第一个＆＃39; li＆＃39;在我的导航中。有什么想法吗？这是小提琴：

和我的代码：

//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");
    }       
});

Answer 1

在你的mouseout上，你正在检查是否（$（'＃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/

Answer 2

有很多方法可以优化您的代码，但为了学习，这里是您遇到的实际问题。当你测试时：

if($('#mainNav li span').css('display') == "block"){

jQuery将查找#mainNav li span的所有实例，但仅测试第一个实例。您只想测试span内的this：

if($('span',this).css('display') == "block"){

http://jsfiddle.net/ScvpL/1/

同步导航状态

2 个答案: