jquery - jquery 幻灯片处于向上位置后如何删除此类？

Question

我目前为 jQuery 幻灯片设置了以下代码。

$(document).ready(function () {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp();
        return false;
    });
    $('a#slide-toggle').click(function () {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp();
            $(this).removeClass('active');
        } else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

和 html:

<a id="slide-toggle"></a>

<div class="slide-container">
     <a id="slide-up"></a>
     >>content<<
</div>

当我单击 #slide-toggle 时，“active”类将应用到它，并且 div.slide-container 向下滑动以显示内容和另一个链接以将容器向后滑动(即 #slide-up)。当我单击 a#slide-up 时，容器会向上滑动，但 a#slide-toggle 仍保持“事件”状态并应用了该类。

我希望这样当我单击#slide-up 时，“事件”类就会被删除。我怎样才能做到这一点？

-编辑-

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
            $(this).removeClass('active');
            }
        })
        else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});

Answer 1

只需删除 #slide-up 按钮处理程序中的类即可:

$('a#slide-up').click(function () {
    $('.slide-container').slideUp();
    $('#slide-toggle').removeClass('active');
    return false;
});

或者如果您希望它等到动画完成，请在回调中执行此操作:

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(function(){
        $('#slide-toggle').removeClass('active');
    });
    return false;
});

<小时/>

关于您的评论:

$('a#slide-toggle').click(function() {
       // keep a reference to the slide-toggle element
    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(function() {
            $(slideToggle).removeClass('active'); // remove class from slide-toggle
        }); // <-- moved the closing ) to here
    }       // <-- instead of here
    else {
        $('.slide-container').slideDown();
        $(slideToggle).addClass('active'); // add class to slide-toggle
    }
});