更简洁的 jQuery，用于控制相同 div 可见性的多按钮

Question

我有 3 个按钮来控制 1 个div 的可见性。

我们想对div 执行以下操作：

• 首次单击三个按钮中的任何一个时显示
• 显示单击的按钮是否与以前的按钮单击不同
隐藏是否单击的按钮
• 与上次单击的按钮相同，以及div 当前是否可见
• 显示单击的按钮是否与上次单击的按钮相同，以及div 当前是否不可见

目前我有这个：

//$('#alert_area') = target div
$button = $('.button')
if ($button.attr('id') != $('#alert_area').attr('showing')){
    $('#alert_area').show()
}else{
    if ($('#alert_area').is(":visible")){
        $('#alert_area').hide(); 
    }else{
        $('#alert_area').show(); 
    }
}
$('#alert_area').attr('showing', $button.attr('id'))

Answer 1

这只是一个轻微的改进，但你可以用toggle替换你的else块。 您还可以缓存选择器以整理内容。

 var $button = $('.button'), $alertArea = $("#alert_area");
 if ($button.attr('id') != $alertArea.attr('showing')) {
     $alertArea.show()
 } else {
     $alertArea.toggle();
 }
 $alertArea.attr('showing', $button.attr('id'));