如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
可以创建一个函数来检查可见度/显示属性,以便测量该元素是否显示在界面中。
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()
方法。
使用可见可见启用阻塞器时检查 :
$(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 区块的代号。 所以如果它可见, 您可以检测是否打开了阻塞器 。
如何如何元素可见度和jQuery 工作;
元素可以隐藏display:none
, visibility:hidden
或opacity:0
这些方法之间的差异:
display:none
隐藏元素,且不占用任何空间;visibility:hidden
隐藏元素,但它在布局中仍然占据空间;opacity:0
将元素隐藏为“ 可见性: 隐藏” , 它仍然占载着布局的空间; 唯一的区别在于不透明让一个元素部分透明;
if ($('.target').is(':hidden')) {
$('.target').show();
} else {
$('.target').hide();
}
if ($('.target').is(':visible')) {
$('.target').hide();
} else {
$('.target').show();
}
if ($('.target-visibility').css('visibility') == 'hidden') {
$('.target-visibility').css({
visibility: "visible",
display: ""
});
} else {
$('.target-visibility').css({
visibility: "hidden",
display: ""
});
}
if ($('.target-visibility').css('opacity') == "0") {
$('.target-visibility').css({
opacity: "1",
display: ""
});
} else {
$('.target-visibility').css({
opacity: "0",
display: ""
});
}
有用的 jQuery 切换方法 :
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
$(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>