Jquery 同步导航状态

我已经成功地用jQuery同步了两个导航级别以显示on和off。我希望用户将鼠标移动到两个级别之外，以使效果良好。然而，这似乎只适用于我导航中的第一个“li”。有什么想法吗？这是小提琴：

我的代码是：

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

---

在鼠标外，您正在检查（$（“#mainNav li span'）.css（'display'）==“none”），此范围不是指用户刚离开的li内的范围，而是指存在于#mainNav中的所有li中的所有范围的数组

无论如何，你不需要JS，我已经在没有JS的情况下为你修复了它，只是添加了以下css：

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

---

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

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

jQuery将查找

#mainNav li span

的所有实例，但只测试第一个实例。您只想测试此

的
span
内部：

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

您好，谢谢您的解释，这正是我想要实现的目标。如果您愿意，请随时提供有关如何优化我的代码的更多信息：）感谢您的回复，James，但是我需要悬停状态来处理li中的“a”标记，而不是上层li本身。如果不清楚，我道歉。