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

如果一个元素是visiblehidden?


当前回答

这个问题最简单的答案是:

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()方法。

发自我如何确定混合元素的状态?


您可以通过使用:visible:hidden选择器。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果你只是根据它的能见度 依据一个元素行事 你可以包括:visible:hidden在选择表达式中。例如:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

通常当检查某物是否可见时, 您会立即直接去做其他事情。 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" });

由于问题只涉及一个要素,本守则可能更适合:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

twernt的建议,但适用于单一个元素;并且匹配 jQuery FAQ 中推荐的算法.

我们用jQuery的是( )将选中的元素与其它元素、选择器或任何 jQuery 对象一起检查。此方法沿 DOM 元素沿 DOM 元素查找匹配,该匹配符合所传递的参数。如果匹配,则返回为真实,否则返回为虚假。

要检查它是否不可见, 我使用它!:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

或以下是 sam, 将 jQuery 选择器保存在一个变量中, 以便在您需要它多次时有更好的性能 :

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}