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

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


当前回答

有太多的方法可以检查隐藏元素。 这是最好的选择(我刚刚推荐你):

使用 jquery, 生成一个元素, 隐藏在 css 中的“ display: noone ” 。

要点是:

$('element:visible')

和供使用的示例:

$('element:visible').show();

其他回答

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 : 看不到 。 但上述方法在许多情况下可能有用, 特别是当您需要找到隐藏的父( 隐藏的父( 隐藏的父) 中是否存在错误时, 因为在这种情况下 : 可见的不会起作用 。

您可以在可见时添加一个类。添加一个类,显示。然后检查是否有一个类:

$('#elementId').hasClass('show');

如果您有表演类, 它返回为真 。

添加这样的 cs :

.show{ display: block; }

只需通过检查布林值来检查可见性, 例如 :

if (this.hidden === false) {
    // Your code
}

i 为每个函数使用此代码。 否则您可以使用( “: 可见” ) 来检查元素的可见度 。

下面的代码检查,如果元素隐藏在jquery或可见

// You can also do this...

        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });

要检查是否显示 I 使用 :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

或以下是 sam , 将jquery 选择器保存在一个变量中, 以便在需要它多次时有更好的性能 :

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}