如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
只需检查布林值, 即可检查可见度, 例如 :
if (this.hidden === false) {
// Your code
}
我为每个函数使用此代码。 否则您可以使用is(':visible')
检查某一要素的可见度。
其他回答
我只是想澄清,在jQuery,
某些要素可被视为隐藏,原因如下:
- 它们有一个 CSS 显示值, 没有任何值 。
- 它们组成元素 类型 = "隐藏" 。
- 它们的宽度和高度明确定为0。
- 隐藏了祖先元素,所以该元素不在页面上显示。
具有可见度的要素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。 在隐藏元素的动画中, 该元素被视为可见, 直到动画结束 。
资料来源:隐藏选择器 jQuery API 文件
if($('.element').is(':hidden')) {
// Do something
}
使用可见可见启用阻塞器时检查 :
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>
“ 阻塞检查” 是一个 adblocker 区块的代号。 所以如果它可见, 您可以检测是否打开了阻塞器 。
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
这里有一个永久有条件的表达式 来检查元素的状态 然后切换它:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
您需要同时检查 显示和可见度 :
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
如果我们检查$(this).is(":visible")
,j 查询自动检查这两个东西。