同步导航状态

我设法同步两个导航级别以使用jQuery显示和关闭。我希望用户在两个级别之外移动鼠标以使其效果良好。这似乎只适用于我的导航中的第一个'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"); 
    }  
});

来源

2013-04-09 Agent Smith

有许多方法来优化你的代码，但为了学习的利益，这是你遇到的实际问题。当您测试：

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

jQuery将寻找的#mainNav li span所有实例，但只测试第一个。你只需要测试的span内的this：

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

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

来源

2013-04-09 15:06:17 Blazemonger

嗨，谢谢你的解释，这是我想达到的。如果你愿意，请随时提供更多关于如何优化我的代码的信息:) – 2013-04-09 19:39:30

在您的鼠标移开，你正在检查，如果（$（ '＃mainNav李跨度'）的CSS（ '显示'） ==“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-09 15:03:02

感谢您的回应詹姆斯，但我需要悬停状态为里内，而不是在上的“a”标签工作级本身。如果不明确，道歉。 – 2013-04-09 19:41:28

同步导航状态

回答

相关问题