javascript - 多个导航更新Jquery

Question

创建了页眉和页脚导航。标题导航包含 1 个 UL，页脚导航包含 5 个 UL。我希望页脚导航中每个 UL 的 li:first 子项与页眉导航匹配。页脚导航与标题导航具有相同的主 li，但其中包含子 li 有人可以帮我吗？

我为我的问题创建了一个 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>

Answer 1

我想我明白你在找什么。尝试这样的事情：

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

演示：http: //jsfiddle.net/dirtyd77/WkZuv/65/

Answer 2

以下语句存在问题。

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

$(this).index() 总是返回零。尝试调整您的 css 选择器以匹配 ul.footer 元素集以获得正确的索引。不过，您将不得不进行一些其他修改。