jQuery if语句来检查可见性

我试图写一个脚本，将隐藏/显示div取决于其他元素的可见性。 当我点击其他元素时，该行为应该发生。 这是我迄今为止写的：

$('#column-left form').hide(); $('.show-search').click(function() { $('#column-left form').stop(true, true).slideToggle(300); if( $('#column-left form').css('display') == 'none' ) { $("#offers").show(); } else { $('#offers').hide(); } }); 

它隐藏了div，但隐藏表单时不会回来。 将是伟大的任何帮助:)

编辑：

好吧，我已经设法达到预期的效果，写下这个：

 $('#column-left form').hide(); $('.show-search').click(function() { if ($('#column-left form').is(":hidden")) { $('#column-left form').slideToggle(300); $('#offers').hide(); } else { $('#column-left form').slideToggle(300); $("#offers").show(); } }); 

我不知道它是否正确写入，但它的工作原理;）谢谢大家的帮助！

Answer 1

您可以使用.is(':visible')来testing是否可见，并使用.is(':hidden')来testing相反的结果：

 $('#offers').toggle(!$('#column-left form').is(':visible')); // or: $('#offers').toggle($('#column-left form').is(':hidden')); 

参考：

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

Answer 2

是的，你可以在jQuery中使用.is(':visible') 。 但是，当代码在safari浏览器下运行.is(':visible')是行不通的。

所以请使用下面的代码

 if( $(".example").offset().top > 0 ) 

以上行将同时工作IE浏览器以及safari。

Answer 3

尝试

 if ($('#column-left form:visible').length > 0) { ... 

Answer 4

  $('#column-left form').hide(); $('.show-search').click(function() { $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why $('#column-left form').hide(); if(!($('#column-left form').is(":visible"))) { $("#offers").show(); } else { $('#offers').hide(); } }); 

Answer 5

修复了与使用.is（“：visible”）相关的性能问题之后，我build议不要使用上面的答案，而是使用jQuery的代码来判断单个元素是否可见：

 $.expr.filters.visible($("#singleElementID")[0]); 

所做的是检查一组元素是否在另一组元素中。 所以你会在页面上的整个可见元素集中寻找你的元素。 有100个元素是非常正常的，可能需要几毫秒来search可见元素的数组。 如果你正在build立一个networking应用程序，你可能有数百甚至数千个。 我们的应用程序有时会花费100ms $（“＃selector”）is（“：visible”），因为它检查一个元素是否在5000个其他元素的数组中。

Answer 6

如果可见。

 $("#Element").is(':visible'); 

如果它隐藏。

 $("#Element").is(':hidden');