jQuery accordion: удалять активный класс при нажатии активной метки

Question

У меня есть простой аккордеон, который позволяет всем рухнуть. Таким образом, щелчок на активной панели сворачивает его. У меня есть before и after псевдоклассы, назначенные для стрелок, но я не могу понять, как удалить активный класс из активной метки при нажатии на нее, чтобы свернуть ее. Активный класс будет удален, если вы нажмете на другой ярлык, но не нажимаете на активную метку, чтобы свернуть его.

Адрес fiddle.

А вот сценарий:

$(".accordion > dt").click(function(){ 
    $('.active').removeClass('active'); 

    $(this).addClass('active'); 
    if(false == $(this).next().is(':visible')) { 
     $('.accordion > dd').slideUp(600); 
    } 
    $(this).next().slideToggle(600); 
}); 

Я пробовал несколько различных конфигураций (например, обращающего if(false) заявление и удаление active класса), но все, что я попытался было выстрел в темно. Любая помощь оценивается.

Answer 1

попробовать

$(".accordion > dt").click(function(){ 
    $('.active').removeClass('active'); 

    if(false == $(this).next().is(':visible')) { 
     $(this).addClass('active'); 
     $('.accordion > dd').slideUp(600); 
    } 
    $(this).next().slideToggle(600); 
}); 

Answer 2

использованием toggleClass() и siblings()

попробовать этот

$(".accordion > dt").click(function(){ 
    //$('.active').removeClass('active'); 
     $(this).toggleClass('active').siblings('dt').removeClass(); 

      if(false == $(this).next().is(':visible')) { 
    $('.accordion > dd').slideUp(600); 
      } 
     $(this).next().slideToggle(600); 
}); 

Answer 3

Это потому, что ваш активный класс добавляется в dt элемент каждый раз, когда вы нажимаете. Вы добавляете только активный класс, если нет активных классов, что означает, что ни один из элементов dd не отображается. Так что вам нужно изменить, чтобы

$(".accordion > dt").click(function(){ 
    $('.active').removeClass('active'); 
    if(false == $(this).next().is(':visible')) { 
     $('.accordion > dd').slideUp(600); 
     $(this).addClass('active'); 
    } 
    $(this).next().slideToggle(600); 
}); 

Проверьте Updated Demo Fiddle.