同步导航状态
问题描述:
我设法同步两个导航级别以使用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");
}
});
答
有许多方法来优化你的代码,但为了学习的利益,这是你遇到的实际问题。当您测试:
if($('#mainNav li span').css('display') == "block"){
jQuery将寻找的#mainNav li span
所有实例,但只测试第一个。你只需要测试的span
内的this
:
if($('span',this).css('display') == "block"){
答
在您的鼠标移开,你正在检查,如果($( '#mainNav李跨度')的CSS( '显示') ==“none”),这个跨度并不是指用户刚离开的li内的跨度,而是指#mainNav中所有li中存在的所有跨度的数组。
你不需要JS这个反正,我已经固定为你没有JS,只是增加了这个CSS:
#mainNav li:hover {background:#fff;}
#mainNav li:hover a {color:#333;}
+0
感谢您的回应詹姆斯,但我需要悬停状态为里内,而不是在上的“a”标签工作级本身。如果不明确,道歉。 – 2013-04-09 19:41:28
嗨,谢谢你的解释,这是我想达到的。如果你愿意,请随时提供更多关于如何优化我的代码的信息:) – 2013-04-09 19:39:30