머리글/바닥 글 nav update jquery

Question

jQuery를 사용하여 다른 상태로 머리글 및 바닥 글 탐색을 만들었습니다. 바닥 글 탐색을 클릭 할 때 헤더 탐색을 업데이트하는 데 문제가 있습니다. 예를 들어 사용자가 바닥 글 탐색기에서 목록 1을 클릭하면 헤더 탐색이 동일한 선택으로 업데이트되기를 원할 것입니다. 내가하고있는 일에 대한 jsfiddle 예제를 포함했습니다.

업데이트 : 헤더 탐색에는 기본 목록 항목이 있으며 바닥 글 탐색에는 기본 탐색 항목과 하위 네비게이션이 있습니다. 동일한 기능을 수행하려고하지만 대신 footerTitle이라고 표시된 첫 번째 목록 항목을 클릭하면 헤더 탐색기로 업데이트됩니다. 나는 jsfiddle

http://jsfiddle.net/WkZuv/40/

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

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

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


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

<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> 

Answer 1

확인을 갱신이 밖으로 당신은 또한 JQuery와 객체를 캐싱에 대해 생각해야 http://jsfiddle.net/WkZuv/28/

.

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

$(".footer > li").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"); 
    } });