如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
人们可以简单地使用hidden
或visible
属性, 如 :
$('element:hidden')
$('element:visible')
或者您可以简化相同的是如下所示。
$(element).is(":visible")
其他回答
通常当检查某物是否可见时, 您会立即直接去做其他事情。 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());
}
这里有一个永久有条件的表达式 来检查元素的状态 然后切换它:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
您可以在显示时添加一个类。添加一个类,show
。然后检查它有一个类:
$('#elementId').hasClass('show');
如果有的话它返回为真show
类。
添加像这样的 CSS :
.show{ display: block; }
有很多方法可以检查元素是否可见或隐藏在 jQuery 中。
Demo HTML 例如引用
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
使用可见性过滤过滤器选择器$('element:hidden')
或$('element:visible')
$('element:hidden')
:选择隐藏的所有元素。
Example:
$('#content2:hidden').show();
$('element:visible')
:选择可见的所有元素。
Example:
$('#content:visible').css('color', '#EEE');
更多信息http://api.jquery.com/category/selectors/visibility-filter-selectors/
使用使用is()
过滤过滤
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}