更简洁的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

这只是略有改进，但您可以将else块替换为toggle。你也可以缓存你的选择器来搞定事情。

 var $button = $('.button'), $alertArea = $("#alert_area");

 if ($button.attr('id') != $alertArea.attr('showing')) {
     $alertArea.show()
 } else {
     $alertArea.toggle();
 }

 $alertArea.attr('showing', $button.attr('id'));