jquery列表项类切换

Question

我有一个简单的功能来将列表项类从"活动"切换到"非活动".什么是最有效的方式(即使用最少量的代码)将所有其他列表项设置为"非活动",以便只能有一个"活动"列表项？请参阅下面的示例.谢谢

<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

<script>
    $('#one').click(function () {
        if ($(this).hasClass("inactive")) {
            $(this).removeClass("inactive").addClass("active");
        } else {
            $(this).removeClass("active").addClass("inactive");
        }
    });
</script>

Answer 1

这可以工作:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active').addClass('inactive');
    $(this).addClass('active').removeClass('inactive');
});

要么

$('.menu li').click(function () {
    $('.menu li').removeClass('active').addClass('inactive');
    $(this).toggleClass('active inactive');
});

第二种方法更短,但更慢.

http://jsperf.com/toggle-vs-add-remove

编辑:这个更短更快:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

如果性能确实存在问题,您可以将菜单存储在变量中并对此变量执行操作,例如:

var $menu = $('.menu li');
$menu.click(function () {
        $menu.not(this).removeClass('active');
        $(this).addClass('active');
    });