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

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


当前回答

.is(":not(':hidden')") /*if shown*/

其他回答

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

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

使用类切换,而不是样式编辑.

使用指定用于“ 隐藏” 元素的类是容易的, 也是最有效的方法之一 。 套用“ 隐藏” 的显示样式“ 无” 将比直接编辑该样式更快 。 我在堆叠溢出问题中解释了其中的一些内容, 使两个元素可见/ 隐藏在同一 div 中 。


缩略式最佳做法和优化

Google前端工程师Nicholas zakas在Google科技演讲中,

加速您的 Javascript (Youtube) 速度

ebdiv 应设置为样式=“ display: noone; ” 。 它用于显示和隐藏 :

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

您可以使用隐藏选择器:

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

可见选择器 :

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

i 将使用 cs 类. hide { 显示: 无重要;} 。

对于隐藏/显示, 我调用. addclass (" hide") /. remove class (" hide") /. remove class (" hide") 来检查可见度, 我使用. has class (" hide" ) 。

如果您不打算使用.toggle () 或. animate () 方法, 这是一个简单明了的检查/ 隐藏/ 显示元素的方法 。