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

如果一个元素是visiblehidden?


当前回答

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

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

如果有的话它返回为真show类。

添加像这样的 CSS :

.show{ display: block; }

其他回答

我只是想澄清,在jQuery,

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

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

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

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

if($('.element').is(':hidden')) {
  // Do something
}

发自我如何确定混合元素的状态?


您可以通过使用:visible:hidden选择器。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果你只是根据它的能见度 依据一个元素行事 你可以包括:visible:hidden在选择表达式中。例如:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

这对我有效,我用show()hide()使我的divi 隐藏/可见:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

此选项可以检查标签是否可见

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

.is(":not(':hidden')") /*if shown*/