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

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


当前回答

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

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 

    }


  

这是内部拼写如何解决这个问题的:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

如果您不使用 jquery, 你可以只是利用这个代码 并把它变成你自己的功能:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

只要元素是可见的, 便会返回真实状态 。

有很多方法可以检查元素是否可见或隐藏在jquery中。

demo demo html 例如引用

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

使用可见度过滤选择器$( 元素: 隐藏) 或$( 元素: 可见)

$( 元素: 隐藏 ) : 选择隐藏的所有元素 。 例如 : $( 内容 2: 隐藏 ) show (); $( 元素: 可见 ) : 选择可见的所有元素 。 例如 : $( 内容: 可见 ) . css ( “ 颜色 ” , “ ee ” ) ;

见http://api.jquery.com/类/选择者/visibility-filter-selectors/

正在过滤

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

见http://api.jquery.com/is/

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

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

只需检查该元素是否可见, 并返回一个布尔。 jquery 通过在元素中添加无显示来隐藏元素, 所以如果您想要使用纯正的 javascript, 您仍然可以这样做, 例如 :

if (document.getElementById("element").style.display === 'block') {
  // Your element is visible; do whatever you'd like
}

您也可以使用jquery, 因为您的代码的其余部分似乎使用这个代码, 而您有小块代码。 类似在jquery的下面的东西, 也为您玩同样的把戏:

if ($(element).is(":visible")) {
    // Your element is visible, do whatever you'd like
};

使用 cs 方法在 jquery 中也可以产生同样的结果 :

if ($(element).css('display') === 'block') {
    // Your element is visible, do whatever you'd like
}

在检查能见度和显示情况时,您还可以做以下工作:

if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
   // Your element is visible, do whatever you'd like
}