Функция JQuery click removeClass addClass sequential

Question

Я хочу нажать кнопку, появляется div, при нажатии на ту же кнопку он должен исчезнуть.

Фактически только появляющиеся работы, как скрыть это снова?

Skript:

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

HTML:

<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() {...}) будет оцениваться как выражение функции, и результат, функция, будет возвращен в качестве итогового результата инструкции. Но вы не присваиваете результат чему-либо, поэтому его просто игнорируют.

E.g. если вы могли бы сделать

// 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 
}