如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

通常当检查某物是否可见时, 您会立即直接去做其他事情。 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" });

其他回答

有两种方法可以检查元素的可见度。

解决方案 # 1

if($('.selector').is(':visible')){
    // element is visible
}else{
    // element is hidden
}

解决方案 # 2

if($('.selector:visible')){
    // element is visible
}else{
    // element is hidden
}

缩略:visible根据j 查询文档:

  • 他们有一个CSSdisplay价值的数值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)。并使用其他方法显示和隐藏元素。

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不会工作。

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(截至2004年12月1日jj 查询: 可见选择器- 我们可以检查元素是否真的以这种方式可见:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});