toggleclass()

원문 링크  http://api.jquery.com/toggleClass/

.toggleClass( className )

.toggleClass() 함수는 클래스의 추가/제거를 처리함.

• .toggleClass( className )
• className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
• .toggleClass( className, switch )
• className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
• switch 클래스가 추가되거나 삭제될 조건문
• .toggleClass( function(index, class), [ switch ] )
• function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다.
• switch 클래스가 추가되거나 삭제될 조건문

이것은 하나 이상의 클래스 인자를 가질 수 있다.

클래스가 있다면 제거 되고, 없다면 추가 될 것이다.

http://api.jquery.com/toggleClass/ 의 예제를 참조하기 바란다.

1	<div class="tumble">Some text.</div>

$( "div.tumble" ).toggleClass( "bounce" )를 적용시킨다.

1	<div class="tumble bounce">Some text.</div>




$( "div.tumble" ).toggleClass( "bounce" )를 다시 실행하면 ,

<div> class는  처음의 tumble value만 남게 된다.

1	<div class="tumble">Some text.</div>

같은 <div>에 .toggleClass( "bounce spin" ) 를 실행시키면  

<div class="tumble bounce spin"> 와 <div class="tumble"> 를 반복한다.

addOrRemove 의 상태가 true 이면 add 되고 false 이면 remove된다.

1	$( "#foo" ).toggleClass( className, addOrRemove );

is equivalent to:

1 2 3 4 5

if ( addOrRemove ) { $( "#foo" ).addClass( className ); } else { $( "#foo" ).removeClass( className ); }

 

1 2 3 4 5 6 7

$( "div.foo" ).toggleClass(function() { if ( $( this ).parent().is( ".bar" ) ) { return "happy"; } else { return "sad"; } });

 

※  http://www.jquery.com 에 있는 내용을 참조하였습니다.