[jQuery] 메서드 toggleClass()

$(선택자).toggleClass();

해당 선택자에 대해 class를 토글한다.

토글이란 의미는 스위치라는 뜻을 갖고있다. 다시말해 끄거나 키는 2가지 기능을 한다.

toggle의 여러 메서드 중에도

toggleClass() 메서드는 선택자 안에 클래스를 넣어주거나 빼기를 반복 할수 있으며,

jquery1.4버전 후 부터는 여러개의 클래스명을 지정 할수 있다.

ex)

해당 예제는 id가 click인 a태그를 통해 div의 값이 변하는 이벤트이다.

<div>
  Hello World
</div>
<a id="click" href="#none">Change color</a>
 

.normal {font-size:20px;color:#fff;} 
.selected {width:200px;}
.on {background:red;}
 

html과 css를 위와 같이 작성 후

    $(function(){
 
        // ex)    
        $("#click").click(function(){
            $("div").toggleClass("normal selected on");
        });
    });
 

위와 같이 작성하면 해당 id값이 click인 선택자를 클릭시 div가 toggleClass 메서드를 통해 

nomal, selected, on의 이름을 가진 클래스값이 추가된다. 

그리고 다시 id값 click인 a태그를 클릭하면 클래스는 해제된다.

무한반복 가능하다.