아코디언 및 토글 아이콘에 문제가 있습니다.

Question

저는 몇 시간 동안이 방법을 사용하고 있습니다.하지만 어쨌든 나는 총 두뇌 방귀를 가지고있는 것 같습니다. 내가 원하는 것은 아이콘을 토글하고 패널을 위로 움직여 아코디언을 만드는 것입니다. 기본적으로 플러스로의 마이너스 변경은 작동하지만 특정 헤더를 클릭하면 전환되지 않습니다. https://jsfiddle.net/emd381md/11/

Answer 1

나는 전체 코드를 확인하지 않습니다 그러나 이것은 아마도 오류가 여기에 조금 미친 같습니다

$('.accordion-wrapper').on('click', function (e) { 
    e.stopPropagation(); 

    $(this).next('div.accordion-panel').stop(true, false, true).slideToggle(); 
    // $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus'); 
    $('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp(); 

    if (!$(this).hasClass('active-panel')) { 
     $('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
     $(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus '); 
     $(this).addClass("active-panel"); 
    } else { 
     $('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
     $('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus'); 
     $(this).removeClass('active-panel'); 
    } 
}); 

이 내 바이올린은?

$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus'); 

먼저 glyphicon-plus를 제거하고 나중에 추가하십시오.

Answer 2

다음은 작동 데모 https://jsfiddle.net/ju9L9rne/13/입니다.

문제는 if 문의 클래스 이름과 관련이 있습니다. 당신은 모든 accordians가 가지고있는 클래스 인 .unalex-plus을 사용하고있었습니다. 이것이 문제를 일으켰습니다.

그래서 나는 그 클래스를 .glyphicon-minus 또는 .glyphicon-plus 중 하나로 변경했습니다.

변경된 코드 :

if (!$(this).hasClass('active-panel')) { 
    $('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
    $(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus '); 
    $(this).addClass("active-panel"); 
    } else { 
    $('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus'); 
    $(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus'); 
    $(this).removeClass('active-panel'); 
    } 

Answer 3

나는 당신의 Fiddle을 편집했습니다.

그런 식으로 addClass과 removeClass을 사용하지 마십시오. toggleClass은 더 나은 (더 읽기 쉬운) 솔루션입니다.