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

如果一个元素是visiblehidden?


当前回答

您可以在显示或隐藏 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类。

其他回答

Demo 链接

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

来源(来自我的博客):

博客 Plug n Play - jQuery 工具及部件: 如何使用 jQuery 查看元素是否隐藏或可见 ?

如果隐藏在类 - d - no 类中

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }


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

只需检查布林值, 即可检查可见度, 例如 :

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

我为每个函数使用此代码。 否则您可以使用is(':visible')检查某一要素的可见度。

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上述方法不考虑父母亲的可见度。为了也考虑父母的可见度,您应该使用.is(":hidden").is(":visible").

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上述方法将考虑div2可见时可见:visible。但是,在很多情况下,特别是当您需要找到隐藏的父(母)是否发现任何错误时,上述情况也许有用,因为在这种情况下,隐藏的母(母)之间是否有错误。:visible不会工作。