Как удалить этот класс после того, как слайд jquery находится в положении вверх?
В настоящее время у меня следующий код для 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.слайд-контейнер скользит вниз, показывая содержимое и другую ссылку для перемещения контейнера вверх (i.e a#slide-up). Когда я нажимаю на#slide-up, контейнер скользит назад, но#slide-toggle остается "активным" с примененным к нему классом.
Я хочу, чтобы когда Я нажимаю на # 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');
}
});
});
2 ответов
просто удалите класс в обработчике для :
$('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
}
});
просто добавить:
$(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');
}
});
});