javascript - 添加事件类并更改其他项目的 css

Question

我有这个菜单

            <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 方法吗？

Answer 1

$("#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')
});​

http://jsfiddle.net/y7Cn5/