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

Question

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

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

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

Вот мои ЯШ:

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

Fiddle here

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

Answer 1

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

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

Answer 2

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

эта скрипка должна это сделать:
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> 

Answer 3

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

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

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

скрипку:

http://jsfiddle.net/Gw63h/