如何使 div 在单击时隐藏并使其在再次单击时显示？答案

【问题标题】：How do I make a div hide onclick and make it show when it's clicked again?如何使 div 在单击时隐藏并使其在再次单击时显示？
【发布时间】：2013-04-01 12:25:57
【问题描述】：

我有这个代码：

<script>
(function ($) {
    $(document).ready(function () {
        $("#thisclick, #thisclick2").click(function () {
            if ($('.example').is(":hidden")) {
                $(this).html($(this).html().replace(/Hide/, 'Show'));
            } else {
                $(this).html($(this).html().replace(/Show/, 'Hide'));
            }
            // Do it afterwards as the operation is async
            $(".example").hide();
        });
    });
})(jQuery);
</script>

当前代码的工作方式是，如果单击#thisclick，它将隐藏#example。这是我需要的，但是当再次单击#thisclick 时，我希望它显示#example。使用上面的代码，它不会工作。我必须做什么才能实现这一目标？

【问题讨论】：

使用JQuery .hide()和JQuery .show()。
如果我理解正确的话，你有 $('#thisclick').slideToggle('slow'); 而不是 $('#example').slideToggle('slow');。
@kyle，对不起，我发布了旧代码。我用我目前正在使用的问题更新了我的问题。
@JeffShaver 他试图在点击不同元素后隐藏一个元素。

标签： javascript jquery if-statement document-ready

【解决方案1】：

您应该能够将代码更改为如下所示以使其正常工作：

(function ($) {
    $(document).ready(function() {
    $("#thisclick").click(function () {
        $("#example").slideToggle("slow");
        });
    });
})(jQuery);

这是一个快速示例的链接： http://jsfiddle.net/andyjmeyers/szmXp/

【讨论】：

谢谢安迪。它工作正常，但我有两个我正在使用的 id。每当我单击第二个时它都会起作用，但如果我使用第一个它将不起作用。这就是我使用这一行的方式： $("#thisclick, #thisclick2").click(function () {
我更新了小提琴以包含 2 个按钮来执行相同的函数调用。看起来您设置正确 $("#thisclick, #thisclick2").click(function () {})
谢谢。这与我也更新了您的初始代码相同。但它不会按应有的方式工作。不知道出了什么问题。
你有没有可以通过 JS fiddle 或其他地方分享的例子，以便我们看看？
我发布的是我所拥有的减去基本 html 的内容。 #example 实际上是一个 h3 类。会不会是有干扰的东西？

【解决方案2】：

你期待吗

<button>This click</button>
<p style="display: none">Example</p>

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

请在http://jsfiddle.net/X5r8r/1107/查看

【讨论】：

【解决方案3】：

<script>
    (function ($) {
          $(document).ready(function() {
          $("#thisclick").click(function () {
             if ($('#example').is(":hidden")) {
                 $(this).html($(this).html().replace(/Hide/, 'Show'));

             } else {
                 $(this).html($(this).html().replace(/Show/, 'Hide'));
             }
             // Do it afterwards as the operation is async
             $("#thisclick").slideToggle("slow");
             if($("#example").attr("isHidden") == "1")
                  $("#example").slideToggle("slow");
             $("#example").attr("isHidden","1");
          });
      });
        })(jQuery);
        </script>

【讨论】：

【解决方案4】：

你可以这样做：

$("#thisclick").click(function () {
   if ($('#example').hasClass("hidden"))
   {
      $('#example').removeClass("hidden");
      $('#example').show();
   }
   else
   {
      $('#example').addClass("hidden");
   }
}

或更容易：

$("#thisclick").click(function () {
   $('#example').toggleClass("hidden");
}

定义样式”：

.hidden
 { display:none;}

【讨论】：