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

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


当前回答

我搜索了这个, 没有一个答案 是正确的我的情况, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

其他回答

隐藏 () 、 显示 () 和 tgggle () 将 cs (display: noone 或 显示: block) 附加到元素中。 同样, 我们也可以很容易地使用长期操作器检查显示 cs 来检查该元素是否隐藏或可见 。

更新内容 :

您还需要检查元素 css 设置为可见度: “ 可见” 或可见度: “ 隐藏” 如果显示属性设置为内嵌区块、 区块、 弹性, 该元素也将可见 。

这样我们就可以检查一个元素的属性, 使得它隐形。 所以它们会显示: 没有和可见度 : “ 隐藏 ” ;

我们可以创建一个用于检查隐藏元素的属性对象 :

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

我们可以通过绕行检查对象匹配中的每个关键值, 如果密钥的元素属性与隐藏的属性值匹配 。

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

如果您想要检查像元素高度: 0 或宽度: 0 或以上这样的属性, 您可以扩展此对象, 并添加更多属性, 并且可以检查 。

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

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

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

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

还考虑到以下补充简记:

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

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

您应该考虑的另一个答案是,如果您正在隐藏一个元素, 您应该使用jquery, 而不是实际上隐藏它, 而是删除整个元素, 但是您将其 html 内容和标签本身复制为 jquery 变量, 然后您需要做的就是测试屏幕上是否有这样的标签, 使用正常的 $ (“ tagname ”) 时间长度 。

您可以使用隐藏选择器:

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

可见选择器 :

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

通常当检查某物是否可见时, 您会立即直接去做其他事情。 jquery 绑链很容易做到 。

所以,如果您有一个选择器, 并且您想要在它上执行某些动作, 只有当它为可见或隐藏时, 您可以使用过滤器 (“ : 可见 ” ) 或过滤器 (“ 隐藏 ” ) , 然后将它与您想要采取的行动连接起来 。

而不是这样声明:

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" });