jquery - 事件下 zipper 接

Question

我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了，但无法使事件状态达到 100%。

我很确定这是我搞砸的 JS。

$('.service-button').click(function () {
    var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide.

    if ($('.active').length === 0) {
        $(itemid).slideDown();
        $(itemid).addClass('active');
        $(this).addClass('new');

    } else if (itemid == "#" + $('.active').attr('id')) {
        $('.active').slideUp();
        $(itemid).removeClass('active');
        $(this).removeClass('new');

    } else {
        $('.active').slideUp(function () {
            $(this).removeClass('active');
            $('.service-button').removeClass('new');
            if ($(".targetDiv:animated").length === 0) {
                $(itemid).slideDown();
                $(itemid).addClass('active');
                $(this).addClass('new');
            }
        });
    }
});

我在这里创建了一个 fiddle http://jsfiddle.net/NWxLe/

下拉菜单工作正常，第一个选项卡应用了事件状态。但是，当我尝试打开另一个选项卡时出现问题。事件状态从前一个状态中删除，但不会添加到新状态中。我希望这是有道理的。

如有任何帮助，我们将不胜感激!

谢谢。

Answer 1

您的代码可以稍微简化。您实际上只需要一个 if 和一个 else，因为您单击的选项卡要么已经处于事件状态，要么不是

$('.service-button').click(function () {
    var itemid = '#div' + $(this).attr('target');
    var $activetab = $(this);

    // If the tab is not already active    
    if (!$activetab.hasClass('new')) {
        $('.new').removeClass('new');
        $('.active').slideUp();
        $('.active').removeClass('active');

        // Wait for the slideUp to complete (default slideUp time is 500ms)
        // This is to keep the same behavior as your linked demo
        setTimeout(function() { 
            $activetab.addClass('new');
            $(itemid).slideDown();
            $(itemid).addClass('active')
        }, 500);
    } else { // If the tab is active already
        $('.new').removeClass('new');
        $('.active').slideUp();
        $('.active').removeClass('active');
    }
});

Demo