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

Question

当您点击与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 '<div class="paddingbottom-10" id="voters" style="display: none;">'; 
    echo '<table width="100%" cellpadding="0" cellspacing="0" class="blog-viewers">'; 
     # content 
    echo '</table>'; 
echo '</div>'; 

在此先感谢。

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

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

<input id='view_voters' value='Toggle Viewers/Voters' type='button' /> 

<div style='display: none;' id='viewers'> 
    These are my viewers 
</div> 
<div id='voters'> 
    These are my voters 
</div> 

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

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

}); 

完整的示例在这里：

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