用 jQuery 检查 div 是否可见答案

【问题标题】：Check if divs are visible with jQuery用 jQuery 检查 div 是否可见
【发布时间】：2010-07-23 04:49:26
【问题描述】：

我正在尝试使用大量 jQuery 进行单页设计。我有一些主要的导航元素，根据点击的不同，显示或隐藏不同的 div。例如html：

<div class="box a">
    <div class="inner">
        <a class="boxLink circle black" href="#">Link a</a>
    </div>
</div>
<div class="box a1 hidden">
    <div class="inner circle">
        <a class="boxLink" href="#">a1</a>
    </div>
</div>
<div class="box a2 hidden">
    <p class="green">a2</p>
</div>
<div class="box b">
    <div class="inner">
        <a class="boxLink circle black" href="#">Link b</a>
    </div>
</div>
<div class="box b1 hidden">
    <div class="inner circle">
        <a class="boxLink" href="#">b1</a>
    </div>
</div>
<div class="box b2 hidden">
    <p class="green">b2</p>
</div>

和 jQuery

$(".a").click(function(){
    $('.b').hide();
    $('.b1').hide();
    $('.b2').hide();
    $('.a1').slideDown({
        duration:500,
        complete:function(){
            $('.a2').slideDown('1000');
        }
    });
    return false
});

$(".b").click(function(){
    $('.a').hide();
    $('.a1').hide();
    $('.a2').hide();
    $('.b1').slideDown({
        duration:500,
        complete:function(){
            $('.b2').slideDown('1000');
        }
    });
    return false
});

有什么更好、更有效的方法来编写并检查不需要的 div 是否可见？我确实阅读了this solution，但我希望将其保留为 div 块而不是列表。

【问题讨论】：

标签： jquery

【解决方案1】：

.is(':visible') 用于非常简单的检查。返回一个布尔值。

【讨论】：

谢谢，那还有必要吗？还是和我说的一样 .hide 即使它们已经隐藏了？

【解决方案2】：

您甚至可以在已经处于所需状态的元素上调用 hide 和 show 方法。

$('#abc').hide() 将隐藏#abc，如果不隐藏，则不做任何事情

.show() 也是如此。

所以我想对于已经隐藏的元素不需要进行健全性检查

【讨论】：

【解决方案3】：

你可以在一个语句中完成所有隐藏，例如：

$('.b, .b1, b2').hide();

除此之外，我不确定我明白您为什么需要检查可见性？您可以隐藏已经隐藏的元素而不会出现问题

我也会更简洁地进行滑动：

$('.a1').slideDown(500, function() {
     $('.a2').slideDown(1000);
});

【讨论】：