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

如果一个元素是visiblehidden?


当前回答

这里有一个永久有条件的表达式 来检查元素的状态 然后切换它:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

其他回答

使用隐藏选择, 您可以匹配所有隐藏元素

$('element:hidden')

使用可见选择, 您可以匹配所有可见元素

$('element:visible')

您应该考虑的另一个答案是,如果您隐藏了一个元素,您应该使用jj 查询,但实际上没有隐藏它,而是删除了整个元素,但复制了它HTML HTML输入 jQuery 变量,然后您只需要测试屏幕上是否有这样的标记,然后使用普通if (!$('#thetagname').length).

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

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

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

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

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

测试一个元素时: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