jquery:只在mouse-out上的mouseover-remove上添加class到list-items？

Question

嘿伙计们,这是最好的方法:

我有一份清单

<ul>
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li class="selected">dude</li>
    <li>whatever</li>
</ul>

最初,一个项目已经应用了一个.selected类.当我将鼠标悬停在其中一个列表项上时,我希望这个列表具有.selected类.所以每个项目应该只在我结束时应用类,一旦我离开项目,类被删除,下一个有类.

Answer 1

根据你的描述,我想你想要这个:

$('ul > li').hover(function () {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

演示:http://jsfiddle.net/swN5F/

或者,更有可能你想要的是:

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});

演示:http://jsfiddle.net/swN5F/1/(请注意,最后悬停的项目仍为红色)

更新:适用于多个<ul>s的版本,以及使用向上/向下箭头键:

var $activeUl = $('ul:first'); // For keyboard arrows

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $activeUl = $(this).parent();
});

$(document).keydown(function (e) {
    var direction, siblingsSelector;
    if (e.which == 38) { // up
        direction = 'prev';
        siblingsSelector = ':not(:first-child)';
    } else if (e.which == 40) { // down
        direction = 'next';
        siblingsSelector = ':not(:last-child)';
    }
    $activeUl.find('.selected')[direction]().addClass('selected')
        .siblings(siblingsSelector).removeClass('selected');
});

演示:http://jsfiddle.net/zBjrS/36/