在查看下一个内容之前隐藏可见内容

当你点击id="viewers"的链接来查看它的内容然后，在它可见之后，当你点击id="voters"的链接时， id="viewers"将隐藏然后显示id="voters"的内容。 我怎样才能做到这一点？ 我已经为自己尝试但是我没有到目前为止：/这是我的代码：

 $('#view_voters').click(function() { if($('#viewers').is(':visible')) { $('#viewers').slideUp('slow'); } if($('#viewers').is(':hidden')) { $('#voters').slideToggle('slow'); } }); 

HTML

 echo '
'; echo ''; # content echo ''; echo '
'; 

提前致谢。

Answer 1

为什么要检查两次相同的情况？ 只需将’if-if’代码转换为’if-else’代码，因为visible和hidden是相反的条件。 像这样：

 if ($('#viewers').is(':visible')) { $('#viewers').slideUp('slow'); } else { $('#voters').slideToggle('slow'); } 

Answer 2

如果没有你的html很难说，但你可以简化并做一些这样的事情，它也更具可扩展性。

 var $panels = $('.panel'); // All your sections with class `.panel` var panelSlide = function ($this) { $panels.find(':visible').slideUp('fast', function () { $this.slideDown(); }); }; $('#voters, #viewers').click(function () { panelSlide($(this).find('.panel')); }); 

Answer 3

将其中一个元素设置为隐藏，并将另一个元素设置为可见。

  
 These are my viewers 
 
 These are my voters  

然后在单击时切换两个元素。

 $('#view_voters').click(function() { $('#viewers').toggle(); $('#voters').toggle(); }); 

完整的例子：

http://jsfiddle.net/7akvT/2/