Как удалить этот класс после того, как слайд 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). Когда я нажимаю на слайд #, контейнер снова перемещается вверх, но # слайд-переключатель остается «активным» с примененным к нему классом.

Я хочу, чтобы, когда я нажимаю на слайд #, «активный» класс удалялся. Как я могу это сделать?

-edit-

$(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
    }
});

Answer 2

просто добавьте:

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

        // removing active class for active element
        $('a.active').removeClass('active');

        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp();
        } 
        else {
            $('.slide-container').slideDown();
            $(this).addClass('active');
        }
    });
});