2011-02-07 6 views
1

클릭하면 아래의 div로 확장되는 링크가 있습니다. "My Link"에 일종의 표시기를 추가해야합니다. 예를 들어 "당근"아이콘과 같이 섹션 확장을 나타냅니다. 기본적으로 나는 CSS 클래스에 아이콘을 추가하고 그 클래스를 다른 이미지를 가진 다른 클래스와 교환해야한다고 생각했다. toggleClass 비트를 찾으면 클래스를 추가/제거하는 대신 클래스를 추가/제거하는 것처럼 보입니다.jQuery로 swap css 클래스

그래서 수업을 어떻게 대체 할 수 있습니까?

다음은 시각적 표시기를 추가하지 않은 상태입니다.

$("#mLink").click(function() { 
    $("#showHideDiv").slideToggle("fast"); 
}); 

<span id="mLink">My Link</span> 
<div id="showHideDiv"> 
    hidden content 
</div> 

나는

답변

3

당신은 .toggle()help를 호출해야합니다. 마찬가지로

$('#myLink').toggle(function() { 
    $("#showHideDiv").slideDown("fast").toggleClass('open'); 
}, function() { 
    $("#showHideDiv").slideUp("fast").toggleClass('open'); 
}); 
2

그냥 문자열이 토글 함께 뭔가 각 호출 것

$('#myDiv').toggleClass('a').toggleClass('b');

및 클래스 중 하나를 목표 시작이 ..

<div id="myDiv" class="b"> bla bla </div>

와 같은 둘 다 토글하여 원하는 결과를 얻습니다.

+0

+1이 방법이 가장 쉽습니다. 간단하고 복잡하지 않습니다. 완벽하게 작동합니다. – Onimusha