0

我想单击一个按钮，出现一个 div，单击同一个按钮时它应该消失。

居然只有出现的作品，怎么又隐藏了？

脚本：

$('#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>

这是尝试使用回调，但它不起作用......

4

2 回答 2

5

如果从一开始就正确设置了类，则可以使用 .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('...');
}

但这不是你想要的。所以把一个函数放在那里是合法的，但没有特殊意义，因此没有效果。

于 2011-09-28T08:07:48.753 回答
0

使用toggleClass, 有时toggleClass可能有点喜怒无常，所以使用 if 语句和变量。

在须藤代码中：

variable = 0

if variable = 0
{
    Show Div
    variable = 1
}
else if variable = 1
{
    Hide Div
    variable = 0
}
于 2011-09-28T08:10:17.597 回答