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

Question

如何使用.hide()、.show()或.toggle()来切换元素的可见性？

如何测试元素是否visible（可见）或hidden（隐藏）？

- Toytown Mafia

---

值得一提的是（即使经过这么长的时间），在Internet Explorer 8下，$(element).is(":visible")适用于jQuery 1.4.4，但不适用于jQuery 1.3.2。可以使用Tsvetomir Tsonev提供的有用测试片段进行测试。请记得更改jQuery版本以在每个版本下进行测试。 - Reuben

这与另一个问题相关，但是不同的问题：https://dev59.com/-GQm5IYBdhLWcg3wrAiY#17426800 - Mark Schultheiss

如果您对虚拟 CSS 元素隐藏不感兴趣，而是关注用户在“视口区域”内的物理可见性，则可以考虑查看以下链接：https://dev59.com/FHRB5IYBdhLWcg3w3K4J 和 https://dev59.com/6nVD5IYBdhLWcg3wAGeD - user1742529

Answer 1

由于该问题涉及单个元素，因此这段代码可能更合适：

// Checks CSS content 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。

- Tsvetomir Tsonev

---

这个解决方案似乎会鼓励混淆visible=false和display:none的概念；然而Mote的解决方案清楚地说明了代码编写者意图检查display:none（通过提到控制display:none而不是visible=true的hide和show）。 - kralco626

没错，但是正如chiborg所指出的那样，:visible也会检查父元素是否可见。 - Tsvetomir Tsonev

你说得有道理 - 我会澄清一下代码只检查display属性。鉴于原问题涉及到show()和hide()函数，并且它们设置的是display属性，我的答案是正确的。顺便说一句，它可以在IE7上工作，这里有一个测试代码段 - http://jsfiddle.net/MWZss/ - Tsvetomir Tsonev

我发现反转逻辑会更好： !$('selector').is(':hidden');，不知何故。值得一试。 - Kzqai

这里有一个简单的基准测试，对比了is()和regexp：http://jsperf.com/jquery-is-vs-regexp-for-css-visibility。结论是：如果你追求性能，请使用regexp而不是is()（因为is()会先查找所有隐藏节点再查看实际元素）。 - Max Leske

Answer 2

你可以使用hidden选择器：

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

还有visible选择器：

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

- twernt

---

请注意，在这个演示文稿中有一些与性能相关的好提示：http://addyosmani.com/jqprovenperformance/ - codecraig

感谢您指出这一点。第21至28页显示了:hidden或:visible选择器相对于其他选择器的速度较慢。 - Etienne Dupuis

当你处理一些元素时，而且很少发生什么 - 即极大多数情况下 - 时间问题是一个非常微不足道的问题。噢，天哪！它花了42毫秒而不是19毫秒！！！ - vbullinger

我正在使用这个选择器手动切换元素。对我来说，$('element:hidden')始终为true！ - ZoomIn

您可能需要重新阅读文档，:hidden适用于所有元素。type="hidden"的表单元素只是触发:hidden的一种情况。没有高度和宽度的元素、display: none的元素和具有隐藏祖先的元素也将符合:hidden的条件。 - Joshua Walsh

Answer 3

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将无法工作。

- Mote

---

此处仅检查单个元素的显示属性。而":visible"属性还会检查父元素的可见性。 - chiborg

在使用IE 8进行测试时，这是唯一有效的解决方案。 - evanmcd

@chiborg 是的，但有时候这正是你想要的，我不得不通过“聪明”的 jQuery学习了一番艰辛的道路。 - Casey

这确实回答了问题，因为问题是关于单个元素的，并且使用hide()、show()和toggle()函数，但正如大多数人已经说过的那样，我们应该使用:visible和:hidden 伪类。 - Jimmy Knoot

此答案可用于元素存在但当前不在页面上的情况，例如在detach()之后。 - atheaos

Answer 4

这些答案都没有解决我所理解的问题，这正是我在搜索的内容："如何处理具有visibility: hidden属性的项目？" :visible 和 :hidden 都无法处理此问题，因为它们都是根据文档寻找显示。就我所知，目前没有选择器可以处理CSS可见性。以下是我是如何解决该问题的(使用标准的jQuery选择器，可能还有更简洁的语法):

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

- aaronLile

---

这个答案在字面上处理了"visibility"的含义，但问题是如何使用jQuery测试元素是否已被隐藏或显示。使用jQuery意味着涉及"display"属性。请翻译此内容。 - MarioDS

具有visibility: hidden或opacity: 0属性的元素被认为是可见的，因为它们在布局中仍占用空间。请参考Pedro Rainho的答案和jQuery文档中对:visible选择器的描述。 - awe

你需要遍历 DOM 树向上检查节点的父级，否则这是没有用的。 - vsync

Answer 5

来自如何确定切换元素的状态？

---

你可以使用:visible和:hidden选择器来确定一个元素是否被折叠。

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

如果您只是根据元素的可见性来操作它，可以在选择器表达式中直接包含:visible或:hidden。例如：

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

- user574889

---

为什么没有答案提到元素被移出可见窗口的情况，比如top: -1000px... 这可能是一个边缘情况。 - jazzcat

Answer 6

通常在检查某物是否可见时，你会立即继续对它进行其他操作。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" });

- Simon_Weaver

---

在示例中没有必要提取DOM节点，然后再重新查找。最好只需执行以下操作： var $button = $('#btnUpdate');然后在if表达式中，只需使用$button而不是$(button)。这样做有缓存jQuery对象的优点。 - LocalPCGuy

这是一个简单的例子：http://www.jquerypot.com/how-to-check-an-element-is-visible-or-not-with-jquery/ - Ketan Savaliya

Answer 7

根据jQuery文档，:visible选择器满足以下条件：

• CSS属性display的值为none。
• 表单元素设置了type="hidden"。
• 宽度和高度明确设置为0。
• 祖先元素被隐藏，因此该元素在页面上不可见。

visibility: hidden或opacity: 0属性的元素被认为是可见的，因为它们仍然占据布局中的空间。

这在某些情况下很有用，但在其他情况下则无用，因为如果要检查元素是否可见（即display != none），而忽略其父元素的可见性，则会发现执行.css("display") == 'none'不仅更快，而且返回正确的可见性检查结果。

如果想检查的是可见性，而非显示方式，应该使用：.css("visibility") == "hidden"。

此外，需要考虑到jQuery的附加说明：

由于:visible是jQuery扩展，而非CSS规范的一部分，使用:visible查询无法利用原生DOM querySelectorAll() 方法提供的性能优势。为了在选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":visible")。

此外，如果你关心性能，应该查看Now you see me… show/hide performance (2010-05-04)以及使用其他方法来显示和隐藏元素。

- Pedro Rainho

Answer 8

如何使用jQuery来处理元素可见性：element visibility and jQuery works；

元素的隐藏可以通过display:none、visibility:hidden或opacity:0实现，它们之间的区别：

• display:none隐藏元素并且不占据任何空间；
• visibility:hidden隐藏元素但仍在布局中占据空间；

• opacity:0像visibility:hidden一样隐藏元素，并且仍在布局中占据空间；唯一的区别是opacity可以使元素部分透明。

  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 的有用的 toggle 方法：

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

- webvitaly

---

visibility:hidden 和 opacity:0 的另一个区别是，使用 opacity:0 时元素仍将对事件（如点击）作出响应。我学习过这个技巧，用于制作自定义文件上传按钮。 - urraka

如果您使用opacity:0来隐藏输入框，它仍然可以通过Tab键进行选择。 - YangombiUmpakati

Answer 9

这对我很有效，我使用show()和hide()来隐藏/显示我的div：

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

- Abiy

Answer 10

你还可以使用纯JavaScript来实现这个功能：

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

注意事项：

1. 适用于任何地方

2. 适用于嵌套元素

3. 适用于CSS和内联样式

4. 无需框架

- Matt Brock

---

与jQuery略有不同；它认为visibility: hidden是可见的。 - alex

将上面的代码更改以模仿（可以说是愚蠢的）jQuery行为很容易。函数isRendered（o）{如果（（o.nodeType！= 1）||（o == document.body））{返回true;}如果（o.currentStyle && o.currentStyle [“display”]！=“none”）{return isRendered（o.parentNode）;}否则，如果（window.getComputedStyle）{如果（document.defaultView.getComputedStyle（o，null）。getPropertyValue（“display”）！=“none”）{return isRendered（o.parentNode）;}}返回false;} - Matt Brock