如何检查 jQuery 中是否隐藏了元素?

是可能的切换元件的可见性,使用函数.hide() .show().toggle()

您如何测试元素是visible还是hidden

答案

由于问题涉及单个元素,因此此代码可能更合适:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden");

twernt 的建议相同,但适用于单个元素。它与 jQuery FAQ 中推荐的算法匹配

我们使用 jQuery is()与另一个元素,选择器或任何 jQuery 对象一起检查选定的元素。此方法遍历 DOM 元素以找到匹配项,该匹配项满足传递的参数。如果存在匹配项,则返回 true,否则返回 false。

您可以使用hidden选择器:

// Matches all elements that are hidden
$('element:hidden')

visible选择器:

// Matches all elements that are visible
$('element:visible')
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

上面的方法没有考虑父级的可见性。要同时考虑父级,则应使用.is(":hidden").is(":visible")

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上面的方法将div2可见,而:visible:visible 。但是以上内容在许多情况下可能很有用,尤其是当您需要查找隐藏的父级中是否有任何可见的错误 div 时,因为在这种情况下:visible无效。

这些答案都没有解决我所理解的问题,即我正在寻找的问题: “我如何处理具有visibility: hidden项目visibility: hidden ?”:visible:hidden都不会处理这个问题,因为它们都希望根据文档进行显示。据我所确定,没有选择器来处理 CSS 可见性。这是我的解决方法(标准 jQuery 选择器,可能会有更简洁的语法):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

如何确定切换元素的状态?


您可以使用:visible:hidden选择器来确定元素是否折叠。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果仅基于元素的可见性对其进行操作,则可以在选择器表达式中包括:visible:hidden 。例如:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

通常,当检查是否可见时,您将立即前进并对其进行其他处理。 jQuery 链接使此操作变得容易。

因此,如果您有一个选择器,并且只想在选择器可见或隐藏的情况下对其执行某些操作,则可以使用filter(":visible")filter(":hidden")然后将其与您想要的操作链接起来采取。

因此,代替if语句,像这样:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或更有效,但更难看:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

您可以在一行中完成所有操作:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

:visible选择器根据jQuery 文档

  • 它们的 CSS display值为none
  • 它们是type="hidden"表单元素。
  • 它们的宽度和高度明确设置为 0。
  • 祖先元素被隐藏,因此该元素未显示在页面上。

具有visibility: hiddenopacity: 0元素被视为可见,因为它们仍然占用布局中的空间。

这在某些情况下很有用,而在其他情况下则没有用,因为如果您要检查元素是否可见( display != none ),而忽略父级的可见性,则会发现执行.css("display") == 'none'不仅速度更快,而且还会返回正确的清晰视野检查。

如果要检查可见性而不是显示,则应使用: .css("visibility") == "hidden"

还请考虑其他 jQuery 注释

因为:visible是 jQuery 扩展而不是 CSS 规范的一部分,所以使用:visible查询无法利用本机 DOM querySelectorAll()方法提供的性能提升。为了在使用:visible选择元素时达到最佳性能,请首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible")

另外,如果您担心性能,则应选中 “ 现在您可以看到我… 显示 / 隐藏性能” (2010-05-04)。并使用其他方法来显示和隐藏元素。

这对我有效,并且我正在使用show()hide()使 div 隐藏 / 可见:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

元素可见性和 jQuery 是如何工作的 ;

元素可以使用display:nonevisibility:hiddenopacity:0 visibility:hidden 。这些方法之间的区别:

  • display:none隐藏元素,并且不占用任何空间;
  • visibility:hidden隐藏元素,但是它仍然占用布局中的空间;
  • opacity:0将元素隐藏为 “visibility:hidden”,并且仍然占用布局中的空间;唯一的区别是不透明度使一个元素可以部分透明。

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }

    有用的 jQuery 切换方法:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });

我会使用 CSS 类.hide { display: none!important; }

对于隐藏 / 显示,我调用.addClass("hide")/.removeClass("hide") 。为了检查可见性,我使用.hasClass("hide")

如果您不打算使用.toggle().animate()方法,则这是检查 / 隐藏 / 显示元素的一种简单明了的方法。