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？我确实阅读了this solution，但我希望将其保留为div块而不是列表。

Answer 1

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

Answer 2

即使在已经处于所需状态的元素上，也可以调用hide和show方法。

$（'＃abc'）。hide（）如果没有隐藏则会隐藏#abc，如果是

则不执行任何操作

同样适用于.show（）。

所以我认为没有必要对已经隐藏的元素进行完整性检查

Answer 3

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

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

除此之外，我不确定为什么你需要检查可见性？您可以隐藏已经隐藏的元素（无问题）

我也会更简洁地做滑动：

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

使用jQuery检查div是否可见

3 个答案: