如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
其他回答
有两种方法可以检查元素的可见度。
解决方案 # 1
if($('.selector').is(':visible')){
// element is visible
}else{
// element is hidden
}
解决方案 # 2
if($('.selector:visible')){
// element is visible
}else{
// element is hidden
}
使用任何可见的选择器或隐藏的选择器检查粘度 :
使用.toggle ()- 显示和隐藏元素
function checkVisibility() {
// check if element is hidden or not and return true false
console.log($('#element').is(':hidden'));
// check if element is visible or not and return true false
console.log($('#element').is(':visible'));
if ( $('#element').css('display') == 'none' || $('#element').css("visibility") == "hidden"){
console.log('element is hidden');
} else {
console.log('element is visibile');
}
}
checkVisibility()
$('#toggle').click(function() {
$('#element').toggle()
checkVisibility()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='toggle'>Toggle</button>
<div style='display:none' id='element'>
<h1>Hello</h1>
<p>it's visible</p>
</div>
这个问题最简单的答案是:
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
我会用CSS课.hide { display: none!important; }
.
躲藏/展示,我打电话.addClass("hide")/.removeClass("hide")
为了检查能见度,我使用.hasClass("hide")
.
这是一个简单清晰的检查/隐藏/显示元素的方法, 如果你不计划使用.toggle()
或.animate()
方法。
您可以在显示时添加一个类。添加一个类,show
。然后检查它有一个类:
$('#elementId').hasClass('show');
如果有的话它返回为真show
类。
添加像这样的 CSS :
.show{ display: block; }