Javascript 添加活动类并更改其他项的css

我有这个菜单

            <ul id="menu" class="clearfix">
                <li>
                    <a href="">Product 1</a>
                </li>
                <li>
                    <a href="">Product 2</a>
                </li>
                <li>
                    <a href="">Product 3</a>
                </li>
                <li class="last">
                    <a href="">Product 4</a>
                </li>
            </ul>

我想让这个效果。进入页面时，菜单项的文本颜色为白色。如果您单击一个项目，它将变为活动状态（保留白色文本），而所有其他项目将其颜色更改为灰色，并且当您将鼠标悬停在其中一个项目上时，受影响的项目将是所有其他项目

我尝试了.addClass，但我只成功地将活动类添加到当前项中，而没有更改第一次单击后不活动的其他类

有人知道最好的jquery方法吗？

点击这里（兄弟节点）选择同一节点中的所有其他项

$("#menu li").click(function(){
  $(this).addClass("active").css("color","white")
  $(this).siblings().css("color","gray")
})

---

可能是这样的：更新了，带有悬停功能

如果这不能回答问题，那么这个问题就不被理解，需要重新编写，这就是问题中的所有问题

$("#menu li").hover(function() {
    $(this).removeClass('grey').siblings().addClass('grey');
}, function() {
    $(this).addClass('grey').siblings('.active').removeClass('grey');
    //
}).on('click', function() {
    $(this).removeClass('grey').addClass('active').siblings().addClass('grey').removeClass('active')
});​

试试看

$("#menu > li").hover( function( ) {
    $(this).removeClass("hovered").siblings().addClass("hovered");
}, function( ) {
    $(this).addClass("hovered");
});

$("#menu > li").click( function( ) {
    $(this).addClass("active").siblings().removeClass("active");
});

---

这不是他的问题的答案。@Rikoshay是的，它完全回答了问题当然，现在你。。。从你的2行编辑它answer@Rikoshay第一个小回答回答了这个问题，除了悬停，我也得到了，你从来没有完全回答过这个问题，太完美了，谢谢！这不适用于悬停：（但它确实是活动的更改我错过了你问题的悬停部分，我的回答也是如此，第二次单击li元素时，活动类不会被删除，因此当你将鼠标悬停在一个项目上时，两个项目可能会激活该类

，受影响的项目都是其他项目。

这意味着什么？其他人我明白了；）哈哈，对不起，你可能已经猜到英语不是我的主要语言了

$("#menu > li").hover( function( ) {
    $(this).removeClass("hovered").siblings().addClass("hovered");
}, function( ) {
    $(this).addClass("hovered");
});

$("#menu > li").click( function( ) {
    $(this).addClass("active").siblings().removeClass("active");
});