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

如果元素可见或隐藏, 我如何测试 ?


当前回答

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // Something
}

其他回答

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上述方法不考虑父(父)的可见度。 如果要也考虑母( 父) , 您应该使用 .is (“ 隐藏 ” ) 或.is ( “ 可见 ” ) 。

例如,

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

上述方法将考虑在以下两种情况下显示可见的 div2 : 看不到 。 但上述方法在许多情况下可能有用, 特别是当您需要找到隐藏的父( 隐藏的父( 隐藏的父) 中是否存在错误时, 因为在这种情况下 : 可见的不会起作用 。

:根据 jquery 文档显示的可见选择器:

它们有一个 cs 显示无值。 它们是类型 = “ 隐藏” 的形状元素。 它们宽度和高度被明确设置为 0。 祖先元素被隐藏, 因此该元素不会在页面上显示 。 具有可见度的元素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。

在某些情况中这是有用的,在另一些情况中是没用的,因为如果你想检查元素是否可见(播放=无),忽略父母的可见度,你会发现做.css(“播放”) =“无”不仅速度更快,而且还会正确返回可见度检查。

如果您想要检查可见度而不是显示, 您应该使用: . css (“ 可见度 ” ) = “ 隐藏 ” 。

还考虑到以下补充简记:

因为 : 可见的扩展是一个缩略语, 而不是 cs 规格的一部分, 使用 : 可见 无法利用本地的 dom 查询 Electultl () 方法提供的性能增强 。 使用 : 可见 来选择元素, 首先使用纯 cs 选择器选择元素, 然后使用 . fileter (“ 可见 ” : 可见 ) 来达到最佳性能 。

另外,如果你担心性能,你应该检查一下现在你看到我... 表现/隐藏性能(2010-05-04),并使用其他方法来显示和隐藏元素。

您需要检查... 显示和可见度 :

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们自动检查$( thiss) 。 is (“: 可见”) , jquery check for both the things 自动检查 。

如果隐藏在类 - d - no 类中

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }


  

这些答案都没有涉及我所理解的问题, 也就是我正在寻找的问题, “我如何处理有可见度的项目:隐藏的?” 。 无论是: 可见的还是: 隐藏的, 都无法处理, 因为两者都在寻找文档中的显示。 据我所知, 没有选择器可以处理 cs 可见度。 这就是我是如何解决这个问题的( 标准拼写选择器, 可能有更压缩的语法 ) :

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