Функция щелчка JQuery RemoveClass AddClass последовательный - PullRequest
0 голосов
/ 28 сентября 2011

Я хочу нажать на кнопку, появляется 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>

Вот попробуйте использовать обратный вызов, но он не работает ...

Ответы [ 2 ]

5 голосов
/ 28 сентября 2011

Если классы установлены правильно с самого начала, вы можете использовать .toggleClass() [документы] :

$('#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('...');
}

Но это не то, что вы хотите в любом случае. Таким образом, размещение функции здесь является законным, но не имеет специального значения и, следовательно, не имеет никакого эффекта.

0 голосов
/ 28 сентября 2011

Используйте toggleClass, иногда toggleClass может быть немного темпераментным, поэтому используйте оператор if и переменную.

в коде sudo:

variable = 0

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