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

如果一个元素是visiblehidden?


当前回答

测试一个元素时:hidden在 jQuery 中选择器一个绝对定位元素可能被确认为隐藏,尽管其子元素是可见的.

虽然仔细看一看jQuery文件提供了相关信息,

要素可被视为隐藏,原因如下:[.]其宽度和高度明确定为0。 [.]

因此,在框模型和元素的计算样式方面,这实际上是有道理的。即使没有设置宽度和高度明确无误可设定 0 个至 0个隐含.

举例如下:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>


jQuery 3. x 的更新 :

当 j 查询 3 时, 描述的行为将会改变 ! 如果元素有任何布局框, 包括宽度和/ 或高度为零的布局框, 元素将被视为可见 。

JSF与jQuery 3. 0.0- 阿尔法1:

http://jsfiddle.net/pM2q3/7/

同样的 JavaScript 代码将会有此输出 :

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

其他回答

只是简单地检查一下这个元素是否是可见可见然后,他将返回尘埃,布尔j 查询,通过添加来隐藏元素无显示无对于元素,所以如果您想要使用纯 JavaScript,您仍然可以这样做,例如:

if (document.getElementById("element").style.display === 'block') {
  // Your element is visible; do whatever you'd like
}

另外,您还可以使用 jQuery , 您的代码的其余部分似乎也使用 JQuery , 您的代码块较小 。 在 jQuery 中, 类似下面的密钥也可以使用相同的密钥 :

if ($(element).is(":visible")) {
    // Your element is visible, do whatever you'd like
};

还使用cssjQuery 中的方法可以产生相同的结果:

if ($(element).css('display') === 'block') {
    // Your element is visible, do whatever you'd like
}

若需要检查可见度和显示度,您还可以做以下工作:

if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
   // Your element is visible, do whatever you'd like
}
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不会工作。

就是这样jj 查询内部解决这个问题 :

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

如果您不使用 jQuery, 您可以使用这个代码, 并将其转换为您自己的功能 :

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

哪个isVisible将返回true只要元素是可见的。

   hideShow(){
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) {
    $("#accordionZiarat").hide();
  }

  
  else if ($("#accordionZiarat").is(":hidden")) {
    $("#accordionZiarat").show();
  }

  else{

  }

人们可以简单地使用hiddenvisible属性, 如 :

$('element:hidden')
$('element:visible')

或者您可以简化相同的如下所示。

$(element).is(":visible")