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

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


当前回答

if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

其他回答

有很多方法可以检查元素是否可见或隐藏在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/

您可以使用隐藏选择器:

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

可见选择器 :

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

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

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 自动检查 。

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}