使用jQuery检查div是否可见

Question

我正在尝试使用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？我确实阅读了这个解决方案, 但我希望将其保留为div块而不是列表.

Answer 1

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