jQuery кнопка закрытия для toggleClass и slideToggle не работает должным образом

Question

У меня есть простая настройка переключения слайдов, к которой я хочу добавить кнопку закрытия, но кажется, что removeClass() не работает.

При нажатии на ссылку закрытия я хочу вернуться к предыдущему цвету (удалить.active) и оставить открытыми все остальные, которые открыты. Другими словами, эта близкая ссылка должна влиять только на тот тумблер, в котором она находится. Я подумал, что будет просто удалить "активный" класс из заголовка div и содержимого div и сдвинуть вверх div содержимого.

Часть slideUp работает нормально, но "активный" класс не отключается и не удаляется.

Вот мой JS:

$("h2.titleTrigger").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
 e.preventDefault();
$(this).closest(".toggleContent").slideUp("fast");
$(this).closest(".toggleContent").removeClass("active");
$(this).closest("h2.titleTrigger").removeClass("active");
 });

Скрипка здесь

Я также пробовал toggleClass вместо removeClass, но это тоже не работает. Где я неправ?

Answer 1

h2 не внутри .toggleContent, и при этом это не связано с кнопкой закрытия, поэтому попробуйте это вместо ( демонстрация)

$(".closeIt").click(function (e) {
    e.preventDefault();
    $(this).closest(".toggleContent")
        .slideUp("fast")
        .removeClass("active")
        .prev("h2.titleTrigger").removeClass("active");
});

Answer 2

Вы не выбираете элемент; closest() никогда не найдет h2.

Попробуйте это вместо этого:

$(this).closest(".toggleContent").prev().removeClass("active");

скрипка:

http://jsfiddle.net/Gw63h/

Answer 3

Чтобы ответить на ваш запрос:
"При закрытии я хочу оставить открытыми все остальные, которые открыты. Другими словами, эта закрытая ссылка должна только закрыть переключатель, в котором она находится".

эта скрипка должна сделать это:
http://jsfiddle.net/acturbo/TpQff/1/

JQuery:

$("h2.titleTrigger").click(function(e){
    e.preventDefault();
    //$(this).toggleClass("active").next().slideToggle("fast");
    $("#mydiv").slideToggle("fast");


return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
     e.preventDefault();
    $(this).parent().slideUp("fast");
    $(this).closest(".toggleContent").removeClass("active");
    $(this).closest("h2.titleTrigger").removeClass("active");
 });

HTML

<h2 class="titleTrigger">slide it</h2>

<div id="mydiv">
    <h2 class="closeIt">close  it</h2>
    inside div
</div>