Javascript 添加/删除类和设置元素动画的不同方法

我有5个列表项，单击其中一个时，我知道的唯一方法是设置所有元素的动画，然后将选定元素重新激活为新的宽度。有人能告诉我如何减少这个过程，这样只有当前活动项被设置动画，类被删除，然后新项目被设置动画，活动类被添加吗

JS

在这里拉小提琴：

单链

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    // if clicked element is active itself then do nothing
    if ($(this).hasClass('active')) return;

    $(this) // clicked li
        .animate({
            width: large
        }, 300)
        .addClass('active')
        .siblings('.active') // other li
        .animate({
            width: small
        }, 300)
        .removeClass('active');
});

单链

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    // if clicked element is active itself then do nothing
    if ($(this).hasClass('active')) return;

    $(this) // clicked li
        .animate({
            width: large
        }, 300)
        .addClass('active')
        .siblings('.active') // other li
        .animate({
            width: small
        }, 300)
        .removeClass('active');
});

---

嘿，这很好，但是当点击被触发时，它仍然会为所有列表项设置动画？所有项目都设置为60px，而新激活的项目设置为300px？是否有一种方法可以将选定的项目设置为大，将旧的活动元素设置为小？我只是稍微更新了一下以停止。如果活动元素已打开，则将其重新激活：也许您会以不同的方式执行此操作？嘿，这很好，但在触发单击时仍会设置所有列表项目的动画？所有项目都设置为60px，而新激活的项目设置为300px？是否有一种方法可以将选定的项目设置为大，将旧的活动元素设置为小？我只是稍微更新了一下以停止。如果活动元素已经打开，则重新激活它：也许您会以不同的方式执行此操作？

var test = $('#test'),
    test_li = test.children(),
    small = 60,
    large = 200;

test_li.on('click', function(e) {

    // if clicked element is active itself then do nothing
    if ($(this).hasClass('active')) return;

    $(this) // clicked li
        .animate({
            width: large
        }, 300)
        .addClass('active')
        .siblings('.active') // other li
        .animate({
            width: small
        }, 300)
        .removeClass('active');
});