Question

我用jQuery构建了一个简单的测试，看看是否可以在点击按钮时显示/隐藏元素。

HTML文件：

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div class="hidden">
Some content!
</div>

CSS文件：

.hidden {
 display: none;
}

Javascript文件：

$(document).ready(function () {
$('#show').toggle(function () {
    $('.hidden').removeClass('hidden');
}, function () {
    $('.hidden').addClass('hidden');
});

}）;

...在第一次点击按钮时，内容按预期显示，但在第二次点击时它不会消失。谁能告诉我为什么？

Answer 1

您的问题是，一旦删除了隐藏的类，您就无法通过它进行选择。

无论你是否可以简单地调用.toggle（）来显示或隐藏元素。

http://docs.jquery.com/Effects

Answer 2

改为使用toggleClass：

$(document).ready(function () {
    $('#show').toggleClass('hidden');
});

Answer 3

尝试更多类似的内容：

HTML文件：

<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
<input type="submit" id="show" value="Show content">
<div id="mydiv" class="hidden">
Some content!
</div>

CSS文件：

.hidden {
 display: none;
}

Javascript文件：

$(document).ready(function () {
$('#show').toggle(function () {
        $('#mydiv').removeClass('hidden');
}, function () {
        $('#mydiv').addClass('hidden');
});

});

Answer 4

简单。您正在使用$（'。hidden'）选择器来查找具有'hidden'类的元素。但是，在第一次单击该按钮时，您将删除隐藏的类。

然后您没有该类的项目，因此无法找到再次显示的项目。

更好的是：

<input type="submit" id="show" value="Show content">
<div class="toggle hidden">
Some content!
</div>

$(document).ready(function () {
  $('#show').toggle(function () {
    $('.toggle').removeClass('hidden');
  }, function () {
    $('.toggle').addClass('hidden');
  }
);

Answer 5

你也可以使用.show（）和.hide（），虽然我认为.toggle（）是一个更优雅的解决方案（其他条件相同）。

Answer 6

以下是您的代码所发生情况的细分：

$(document).ready(function () {
    $('#show').toggle(function () {
        $('.hidden').removeClass('hidden'); <-- this removes the class of hidden
    }, function () {
        $('.hidden').addClass('hidden'); <!-- this tries to add the class of hidden, but your selector is '.hidden' so it isn't possible.
});

试试这个：

$(document).ready(function () {
    $('#show').toggle(function () {
        $('#show').removeClass('hidden');
    }, function () {
        $('#show').addClass('hidden');
});

或者更好的方式：

$(document).ready(function () {
    $('#show').toggle();
});

使用“切换”功能进行简单的jQuery测试，不按预期运行

6 个答案: