단일 링크에서 클래스를 전환 하시겠습니까?

Question

모바일 탐색 버튼의 목적을 위해 링크를 클릭하여 (표시 메뉴) 활성 클래스를 추가 한 다음 다시 같은 링크 (축소 메뉴)를 클릭하면 해당 클래스가 제거됩니다.

$(function() { 
    $(".nav-mobile").click(function() { 
     $(".nav-mobile").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

클릭하면 활성 클래스가 추가되지만 다시 클릭하면 제거되지 않습니다.

제거가 가능합니까?

Answer 1

jQuery에서 toggleClass() 함수를 사용할 수 있습니다. 그것은 당신이 원하는 것을 정확히 수행합니다.

확인 API를 문서 : https://api.jquery.com/toggleClass/

Answer 2

사용하는 대신이 코드 :

$(function() { 
    $(".nav-mobile").click(function() { 
     $(".nav-mobile").not(this).removeClass("active"); 
     $(this).toggleClass("active"); 
    }); 
}); 

Answer 3

이

$(function() { 
    $(".nav-mobile").click(function() { 
     var $this = $(this); 
     if($this.hasClass('active')) { 
      $this.removeClass('active'); 
     } else { 
      $(".nav-mobile").removeClass("active"); 
      $this.addClass("active"); 
     } 
    }); 
});