多導航更新Jquery

創建頁眉和頁腳導航。標題導航包含1個UL，並且頁腳導航包含5個UL。我希望li：footer nav中每個UL的第一個孩子與header nav匹配。頁腳導航具有與頁眉導航相同的主要內容，但在其中包含子li有人可以幫助我嗎？多導航更新Jquery

我創建了一個的jsfiddle我的問題：

http://jsfiddle.net/WkZuv/41/

$(".Nav > li").live({ 
    mouseover:function(){ 
     $(this).addClass("menuHover"); 
    }, 
    mouseout:function(){ 
     $(this).removeClass("menuHover"); 
    }, 
    click:function(){ 
     $(".Nav > li").removeClass("menuClicked"); 
     $(this).addClass("menuClicked"); 
    } 
}); 

$(".footer > li:first-child").live({ 
    mouseover:function(){ 
     $(this).addClass("menuHover"); 
    }, 
    mouseout:function(){ 
     $(this).removeClass("menuHover"); 
    }, 
    click:function(){ 
     $(".Nav > li").removeClass("menuClicked"); 
     $(".Nav > li").eq($(this).index()).addClass("menuClicked");  

     $(".footer > li").removeClass("menuClicked"); 
     $(this).addClass("menuClicked"); 
    } 
}); 

.menuHover{ 
    background-color:#666; 
    color:#fff; 
} 
.menuClicked{ 
    background-color:yellow; 
    color:#666; 
} 

.footerTitle{ 
    font-weight: bold; 
    color:black; 
} 

<h1>Header NAV</h1> 
<ul class="Nav"> 
    <li class ="menuClicked"> List 1 </li> 
    <li>List 2 </li> 
    <li> List 3 </li> 
    <li> List 4 </li> 
    <li> List 5</li> 
</ul> 

<hr /> 

<h1>FOOTER NAV</h1> 
<ul class="footer"> 
    <li class ="footerTitle"> List 1 </li> 
    <li>Sub List 2 </li> 
    <li>Sub List 3 </li> 
    <li> Sub List 4 </li> 
    <li>Sub List 5</li> 
</ul> 
<ul class="footer"> 
    <li class ="footerTitle"> List 2 </li> 
    <li>Sub List 2 </li> 
    <li>Sub List 3 </li> 
    <li> Sub List 4 </li> 
    <li>Sub List 5</li> 
</ul> 
<ul class="footer"> 
    <li class ="footerTitle"> List 3 </li> 
    <li>Sub List 2 </li> 
    <li>Sub List 3 </li> 
    <li> Sub List 4 </li> 
    <li>Sub List 5</li> 
</ul> 
<ul class="footer"> 
    <li class ="footerTitle"> List 4 </li> 
    <li>Sub List 2 </li> 
    <li>Sub List 3 </li> 
    <li> Sub List 4 </li> 
    <li>Sub List 5</li> 
</ul> 
<ul class="footer"> 
    <li class ="footerTitle"> List 5 </li> 
    <li>Sub List 2 </li> 
    <li>Sub List 3 </li> 
    <li> Sub List 4 </li> 
    <li>Sub List 5</li> 
</ul>

來源

2013-02-22 Eric Oboite

注：使用'。對（）'（http://api.jquery.com/on/），'.live（）'是貶值。 – Dom 2013-02-22 17:22:11

@dom我的客戶正在使用jquery 1.5 – 2013-02-22 17:23:20

你還有問題嗎？ – Dom 2013-02-27 16:16:25

我想我明白你在找什麼。嘗試是這樣的：

$(".Nav > li").live({ 
    mouseover:function(){ 
     $(this).addClass("menuHover"); 
     $(".footer > li:first-child").eq($(this).index()).addClass("menuHover"); 
    }, 
    mouseout:function(){ 
     $(this).removeClass("menuHover"); 
     $(".footer > li:first-child").eq($(this).index()).removeClass("menuHover"); 
    }, 
    click:function(){ 
     $(".Nav > li").removeClass("menuClicked"); 
     $(this).addClass("menuClicked"); 
     $(".footer > li:first-child").removeClass("menuClicked").eq($(this).index()).addClass("menuClicked"); 
    } 
}); 

$(".footer > li:first-child").live({ 
    mouseover:function(){ 
     $(this).addClass("menuHover"); 
     $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuHover"); 
    }, 
    mouseout:function(){ 
     $(this).removeClass("menuHover"); 
     $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).removeClass("menuHover"); 
    }, 
    click:function(){ 
     $(".Nav > li").removeClass("menuClicked"); 
     $(".footer > li:first-child").removeClass("menuClicked"); 
     $(this).addClass("menuClicked"); 
     $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuClicked"); 
    } 
});

DEMO： http://jsfiddle.net/dirtyd77/WkZuv/65/

來源

2013-02-22 17:44:30 Dom

'ul'部分是不必要的：你可以這樣做 '$（「。footer」）。index（$（this）.parent（））' – abbood 2013-02-22 18:45:10

是的，我知道，更多的是解釋發生了什麼，他並不太熟悉jQuery。 – Dom 2013-02-22 18:48:58

以及你的答案應該被標記爲正確..你有我的投票，但:) – abbood 2013-02-22 18:55:29

沒有與下面的語句的問題。

$(".Nav > li").eq($(this).index()).addClass("menuClicked");

$（this）.index（）總是返回零。嘗試調整您的CSS選擇器以匹配ul.footer元素集合以獲得正確的索引。你將不得不做一些其他的修改。

來源

2013-02-22 17:29:41

多導航更新Jquery

回答

相關問題