如何检查一个元素是否被 jquery 隐藏

Question

我想显示和隐藏一个 div 如下：

$('#Div1').click(function () {
            if ($("#Div2").hidden) {
                $("#Div2").show(500);
            }
            else {
                $("#Div2").hide(1000);
            }

        });

此代码无效。

我想通过单击页面的空白空间来隐藏 div2 我该怎么做，我的代码哪里错了？

Answer 1

hidden 不是 jQuery 对象的属性。尝试 is(':hidden')

  $('#Div1').click(function () {
        if ($("#Div2").is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }

  });

如果时间相同，您可以简单地使用 toggle()，它根据当前可见性执行 hide 或 show。

  $('#Div1').click(function () {
       $("#Div2").stop().toggle(500);
  });

作为@A。 Wolff 建议，为了允许多次点击，使用 stop 以及停止任何正在进行的现有动画：

  $('#Div1').click(function () {
        if ($("#Div2").stop().is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }
  });

第 2 部分：

要在您单击页面上的其他任何地方时隐藏 div，请监听对 document 的单击：

例如

 $(document).click(function(){
     $("#Div2").stop().hide(1000);
 });

为了使其正常工作，您不能允许对 div1 的点击传播到文档，因此请将第一部分更改为在第一个事件参数上也使用 stopPropagation()：

  $('#Div1').click(function (e) {
        e.stopPropagation();       // stop click propagating to document click handler
        if ($("#Div2").is(':hidden')) {
            $("#Div2").show(500);
        }
        else {
            $("#Div2").hide(1000);
        }
  });

如何检查一个元素是否被 jquery 隐藏

how to check if one element is hidden with jquery

html

javascript

jquery