버튼 클릭시 클래스 전환

Question

접힌 메뉴 (1) 링크 된 텍스트와 (2) 아이콘을 트리거 할 수있는 두 개의 링크가 있습니다.

<div class="brand"><a data-toggle="collapse" data-target="#menu-content">Browse by Collection</a></div> 

<i class="toggle-btn ion-android-add" data-toggle="collapse" data-target="#menu-content"></i> 

<ul id="menu-content" class="menu-content collapse">...</ul> 

축소 된 메뉴는 두 가지 방법 중 하나를 통해 열 때, 마이너스 (.ion-android-remove)에있는 더하기 (.ion-android-add) 변경 후 플러스 때 다시 켜지는지, 그래서 나는 그것을하고 싶습니다 메뉴가 축소되었습니다.

클래스를 토글 링하거나 클래스를 추가/제거하는 등의 다른 답변에서 발견되는 다양한 jquery 스 니펫을 시도했지만 트릭을 수행하지 않은 것 같습니다. 미리 감사드립니다!

편집 : 내가이 코드와 함께 작동하도록지고 결국 :

$('.toggle-btn').on('click', function() { 
    $(this).toggleClass('ion-android-add ion-android-remove'); 
}); 

를 단,이 버튼 작동합니다. 브랜드 div를 클릭하면 아이콘에도 영향을 미칠 수 있도록 어떻게 만들 수 있습니까?

Answer 1

jQuery로 작업하기가 매우 쉽습니다. 이 방법이 더있다, 그러나 이것은 먼저 내 마음에 온 :

$('.ion-android-add').click(function(){ 
$(this).removeClass('ion-android-add').addClass('ion-android-remove'); 
}); 

$('.ion-android-remove').click(function(){ 
$(this).removeClass('ion-android-remove').addClass('ion-android-add'); 
});