如何使用jquery检查一个元素是不是隐藏[重复]

Posted 2023-02-21

【中文标题】如何使用jquery检查一个元素是不是隐藏[重复]

【英文标题】：how to check if one element is hidden with jquery [duplicate]如何使用jquery检查一个元素是否隐藏[重复]

【发布时间】：2015-03-01 12:43:36

【问题描述】：

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

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

        );

此代码不起作用。

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

【问题讨论】：

@Vipin Soni：显示和隐藏的时间不同

把你的标题放到谷歌上：how to check if one element is hide with jqueryTHX！

【参考方案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);
        
  );

【讨论】：

关于第二个使用toggle()，你应该stop()动画处理多次点击#Div1

tanks.如何通过点击页面隐藏div？

@mohsen：添加了一个例子