JQuery单击函数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() {...})将作为函数表达式进行计算,结果(函数)将作为语句的整体结果返回.但是你没有将结果分配给任何东西,所以它只是默默地被忽略了.

例如,如果你这样做

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

但这不是你想要的.所以放置一个函数是合法的,但没有特殊意义,因此没有效果.