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
}

JQuery单击函数removeClass addClass sequential

2 个答案: