Question

创建页眉和页脚导航。标题导航包含1个UL，页脚导航包含5个UL。我想要li：页脚导航中每个UL的第一个孩子与标题导航匹配。页脚导航与标题导航具有相同的主要li但在其中包含子li可以有人请帮助我吗？

我创建了一个问题的jsFiddle：

$(".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元素集以获取正确的索引。你必须做一些其他修改。

多个Nav更新Jquery

2 个答案: