如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
API 文献资料:可见可见选择器
其他回答
$(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>
您可以使用这个:
$(element).is(':visible');
$(document).ready(function()
{
$("#toggle").click(function()
{
$("#content").toggle();
});
$("#visiblity").click(function()
{
if( $('#content').is(':visible') )
{
alert("visible"); // Put your code for visibility
}
else
{
alert("hidden");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p id="content">This is a Content</p>
<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>
就是这样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
只要元素是可见的。
您可以在显示时添加一个类。添加一个类,show
。然后检查它有一个类:
$('#elementId').hasClass('show');
如果有的话它返回为真show
类。
添加像这样的 CSS :
.show{ display: block; }
缩略:visible
根据j 查询文档:
- 他们有一个CSS
display
价值的数值none
.- 它们是构成元素的构成元素,
type="hidden"
.- 它们的宽度和高度明确定为0。
- 隐藏了祖先元素,所以该元素不在页面上显示。
具有下列要素的要件要件:
visibility: hidden
或opacity: 0
认为是可见的,因为它们仍在布局中消耗空间。
在某些情况中,这有用,而在另一些情况中则无用,因为如果你想检查该元素是否可见(如果您想检查该元素是否可见) 。display != none
无视家长的能见度 你会发现.css("display") == 'none'
不仅速度更快,而且还会正确返回可见度检查。
如果您要检查可见度而不是显示, 您应该使用 :.css("visibility") == "hidden"
.
也考虑到附加 jQuery 注释:
因为
:visible
是 jQuery 扩展名,不属于 CSS 规格的一部分,使用:visible
无法利用本地DOM提供的绩效提升querySelectorAll()
方法。在使用:visible
选择元素,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible")
.
而且,如果你对工作表现很关心,你应该检查一下现在你看到我... 表现/隐藏表现(2010-05-04)。并使用其他方法显示和隐藏元素。