Question

CODE：

<script type="text/javascript">
$(document).ready(function() {
    $("#clicker").click(function() {
        $(".show_this").show();
        e.preventDefault();
    });
});
</script>

使用上面的脚本，我可以在点击#clicker时显示.show_this但是再次单击#clicker我想隐藏它。我怎样才能调整我的代码呢？

我做了一些研究，似乎通过使用e.preventDefault();我可以实现这一点，但它没有用。

Answer 1

您可以使用toggle();

$(".show_this").toggle();

这将每次切换，因此如果它被隐藏，它将显示它，反之亦然

Api文档：http://api.jquery.com/toggle

同样event.preventDefault();将无法执行此操作，但如果.show-this是锚标记，则会很有用，因为它会阻止默认操作，即遵循链接。

Answer 2

改为使用.toggle()。

$(document).ready(function() {
    $("#clicker").click(function(e) {
        $(".show_this").toggle();
        e.preventDefault();
    });
});

<强> jsFiddle example

Answer 3

您可以使用.toggle()方法执行此操作，例如：

$(document).ready(function() {
    $("#clicker").click(function(e) {  // call the event variable 'e' first here
        e.preventDefault();
        $(".show_this").toggle();            
    });
});

如何使用JQuery再次隐藏单击div？

3 个答案: