如何使用jQuery检查一个元素是否隐藏

Question

如何使用jQuery检查一个元素是否隐藏

16

我想实现以下的显示和隐藏一个 div 的效果：

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

        });

这段代码不起作用。

我希望点击页面的空白处可以隐藏 div2，但是我的代码有问题，请问应该怎么做？

- mohsen

@Vipin Soni：显示和隐藏的时间不同。 - iCollect.it Ltd

只需在谷歌中输入您的标题：如何使用jQuery检查一个元素是否隐藏 谢谢！ - A. Wolff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gone Coding · Accepted Answer

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);
        }
  });

第二部分：

要在页面上的任何其他地方单击时隐藏 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);
        }
  });