jquery - 同步导航状态

Question

我已经设法同步两个导航级别以使用 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");
    }       
}); 

Answer 1

在鼠标移出时，您正在检查 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/

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/