如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

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

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们检查$(this).is(":visible"),j 查询自动检查这两个东西。

其他回答

使用任何可见的选择器或隐藏的选择器检查粘度 :

  1. 使用使用: 可见选择器 - jQuery (“ : 可见” )
  2. 使用: hidden 选择器 - jQuery (“ : hidden ” )

使用.toggle ()- 显示和隐藏元素

function checkVisibility() {
    // check if element is hidden or not and return true false
    console.log($('#element').is(':hidden'));

    // check if element is visible or not and return true false
    console.log($('#element').is(':visible'));

    if ( $('#element').css('display') == 'none' || $('#element').css("visibility") == "hidden"){
        console.log('element is hidden');
    } else {
        console.log('element is visibile');
    }
}

checkVisibility()
$('#toggle').click(function() {
    $('#element').toggle()
    checkVisibility()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='toggle'>Toggle</button>
<div style='display:none' id='element'>
    <h1>Hello</h1>
    <p>it's visible</p>
</div>

您可以在显示或隐藏 CSS 类时使用该类的 CSS 类 :

.show{ display :block; }

设置您的j查询toggleClass()addClass()removeClass();.

例如,

jQuery('#myID').toggleClass('show')

上述代码将添加show当元素没有 cs 元素时 cs 类show当它消逝的时候,show类。

当你在检查它是否可见, 你可以遵循这个 JQuery 代码,

jQuery('#myID').hasClass('show');

上面的代码将返回布尔值( true) 时返回布尔值#myID元素中含有我们的类(show当它没有的时候,是假的,show类。

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

API 文献资料:可见可见选择器

我只是想澄清,在jQuery,

某些要素可被视为隐藏,原因如下:

  • 它们有一个 CSS 显示值, 没有任何值 。
  • 它们组成元素 类型 = "隐藏" 。
  • 它们的宽度和高度明确定为0。
  • 隐藏了祖先元素,所以该元素不在页面上显示。

具有可见度的要素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。 在隐藏元素的动画中, 该元素被视为可见, 直到动画结束 。

资料来源:隐藏选择器 jQuery API 文件

if($('.element').is(':hidden')) {
  // Do something
}
isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // Something
}