jquery - 使用 "toggle"函数的简单 jQuery 测试，未按预期运行

Question

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

HTML file

<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 file

.hidden {
    display: none;
}

Javascript file

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

第一次单击按钮时，内容按预期显示，但第二次单击时内容并没有消失。谁能告诉我为什么？

Answer 1

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

无论如何，您都可以简单地调用 .toggle() 来显示或隐藏元素。

http://docs.jquery.com/Effects