使用jQuery检查div是否可见

我正在尝试使用jQuery加载的单页设计。 我有几个主要的导航元素，根据点击的内容，显示或隐藏不同的div。 例如html：

 
 Link a 
 
 
 
 a1 
 
 
 
a2
 
 
 
 Link b 
 
 
 
 b1 
 
 
 
b2
  

和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

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

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

除此之外，我不确定我明白为什么你需要检查能见度？ 你可以隐藏已经隐藏的元素没有问题

我也会更简洁地做滑动：

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

Answer 2

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

Answer 3

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

$（’＃abc’）。hide（）如果没有隐藏则会隐藏#abc，如果不隐藏则不执行任何操作

同样适用于.show（）。

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