使用jQuery检查div是否可见 [英] Check if divs are visible with jQuery

问题描述

我正在尝试使用jQuery加载进行一页设计.我有一些主要的导航元素，根据单击哪个，显示或隐藏不同的div.例如html:

I am attempting a one page design using loads of jQuery. I have a few main navigation elements and depending on which is clicked, different divs are shown or hidden. For example the 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块而不是列表.

What is a better, more efficient way to write this and check if unwanted divs are visible? I did read this solution but I am hoping to keep this as div blocks and not as a list.

推荐答案

那么您可以在一条语句中进行所有隐藏，例如:

well you can do all the hiding in one statement, like:

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

除此之外，我不确定我为什么需要检查能见度?您可以隐藏不存在问题的隐藏元素

other than that, i'm not sure i see why you need to check visibility? You can hide already hidden elements w/o issue

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

I'd also do the sliding more concisely like:

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

这篇关于使用jQuery检查div是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！