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

如果一个元素是visiblehidden?


当前回答

您可以使用hidden选择器 :

// Matches all elements that are hidden
$('element:hidden')

还有visible选择器 :

// Matches all elements that are visible
$('element:visible')

其他回答

Demo 链接

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

来源(来自我的博客):

博客 Plug n Play - jQuery 工具及部件: 如何使用 jQuery 查看元素是否隐藏或可见 ?

如果隐藏在类 - d - no 类中

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }


  

通常当检查某物是否可见时, 您会立即直接去做其他事情。 jQuery 链条让事情变得容易。

所以,如果您有一个选择器, 并且只有显示或隐藏时才想要对它执行某些动作, 您可以使用filter(":visible")filter(":hidden")然后用您想要采取的行动链绑住它。

所以,而不是一个if语句, 像这样的语句 :

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或更有效率,但更丑陋:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

你可以单行完成所有任务:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

使用可见可见启用阻塞器时检查 :

$(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 区块的代号。 所以如果它可见, 您可以检测是否打开了阻塞器 。