JQuery 클릭 함수 removeClass addClass sequential

Question

버튼을 클릭하고 div가 나타나면 같은 버튼을 클릭하면 사라집니다.

실제로 나타나는 작품 만 다시 숨기는 방법은 무엇입니까?

걙먡 ꍲ 뱭 :

HTML은

$('#button').click(function() { 
    $('#ui-block-a').removeClass('visuallyhidden').addClass('ui-block-a'), function(){ 
    $('#ui-block-a').addClass('visuallyhidden').removeClass('ui-block-a'); 
    }; 
}); 

:

<div class="visuallyhidden" id="ui-block-a"> 
    <ul data-role="listview" data-filter="true" id="nav"></ul> 
</div> 

다음

콜백을 사용하려고하지만, 작동하지 않는 것입니다 ...

Answer 1

클래스가 올바르게에서 설정되어있는 경우 처음에는 .toggleClass()^[docs]을 사용할 수 있습니다.

$('#ui-block-a').toggleClass('visuallyhidden ui-block-a'); 

명시 적으로 추가 할 경우

그렇지 않으면/클래스를 제거, 당신은 .toggle()를 사용할 수 있습니다

$('#button').toggle(function() { 
    $('#ui-block-a').removeClass('visuallyhidden').addClass('ui-block-a'); 

}, function(){ 
    $('#ui-block-a').addClass('visuallyhidden').removeClass('ui-block-a'); 
}); 

---

은 당신의 코드가 작동하지 않는 이유 :

을 당신은 하지 설정입니다 콜백. 쉼표 연산자을 통해 두 개의 명령문을 실행 중입니다. 첫 번째 부분 ($('#ui-block-a').addClass('...').removeClass('...'))은 예상대로 실행됩니다. 두 번째 부분 (function() {...})은 함수 표현식으로 평가되고 결과는 함수의 전체 결과로 반환됩니다. 그러나 결과를 아무 것도 지정하지 않으므로 그냥 무시됩니다.

예. 당신이

// form is like `var foo = x, y;` 
var foo = $('#ui-block-a').removeClass('...').addClass('...'), function(){ 
    $('#ui-block-a').addClass('...').removeClass(...'); 
}; 

을 할 줄 경우 다음 foo 함수

function() { 
    $('#ui-block-a').addClass('...').removeClass('...'); 
} 

를 참조 것입니다하지만 당신이 어쨌든 원하는 것이 아니다. 그래서 기능을 넣는 것은 합법적이지만 특별한 의미가 없으므로 효과가 없습니다.

Answer 2

toggleClass을 사용하십시오. 때로는 toggleClass이 약간 변덕 스러울 수 있으므로 if 문과 변수를 사용하십시오. sudo는 코드

:

variable = 0 

if variable = 0 
{ 
    Show Div 
    variable = 1 
} 
else if variable = 1 
{ 
    Hide Div 
    variable = 0 
}