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

如果一个元素是visiblehidden?


当前回答

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

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

其他回答

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

 // 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  
   // };  

这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden?"两者都不是:visible:hidden将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

如果您想要检查页面上是否可见某个元素, 取决于其父的可见度, 您可以检查是否widthheight本要素的数值均等于0.

jj 查询

$element.width() === 0 && $element.height() === 0

香草香草

element.clientWidth === 0 && element.clientHeight === 0

element.offsetWidth === 0 && element.offsetHeight === 0

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


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

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
if($("h1").is(":hidden")){
    // your code..
}