jQuery if语句检查可见性

Question

我试图写一个脚本，将隐藏/显示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')来测试是否有可见的东西，而使用.is(':hidden')来测试相反的东西:

$('#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

try

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")相关的性能问题后，我建议不要使用上述答案，而是使用jQuery的代码来决定单个元素是否可见:

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

.is的作用是检查一组元素是否在另一组元素中。因此，您将在页面上的整个可见元素集中查找您的元素。拥有100个元素是很正常的，可能需要几毫秒来搜索可见元素数组。如果你正在构建一个web应用，你可能有成百上千个。我们的应用程序有时会花费100毫秒来检查$("#selector").is(":visible")，因为它正在检查一个元素是否在一个包含5000个其他元素的数组中。

Answer 6

如果可见

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

如果是隐藏的

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