问题 如何检查jQuery中是否隐藏了一个元素？

你可以使用 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 不。但上述情况在许多情况下可能会有用，特别是当您需要查找隐藏父级中是否有任何错误div时，因为在这种情况下 :visible 不管用。

这些答案都没有解决我所理解的问题，这正是我所寻找的， “我如何处理有物品的物品 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: hidden 要么 opacity: 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:none， visibility:hidden 要么 opacity:0。这些方法之间的区别：

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