jQuery - 切换两个开关但不能同时切换两个？

Question

我有一个棘手的小问题。在此示例中，我创建了两个开关和两个彩色方 block : http://jsfiddle.net/amQCN/

我试图确保一次只能关闭一个开关，因此总是至少有一个彩色方 block 显示 - 或两者。

我也一直在想办法；如果开关 (1) 打开，并且您单击开关 (2)，它会切换为 (2) 打开 和 (1) 关闭 - 如上所述，您将无法关闭开关 (2) 关闭，但您可以将开关 (1) 重新打开打开，这样它们都打开.

我希望这是有道理的! - 谁能建议一种方法让它发挥作用？

<ul id="switches">
<li><a id="switch1" href="#">1</a></li>
<li><a id="switch2" href="#">2</a></li></ul>
<ul id="squares">
<li id="square1"></li>
<li id="square2"></li></ul> 


$(function() { 

$('#switch1').toggle(function() {
    $('#square1').css("visibility", "hidden");
    $('#switch1').addClass("off");
}, function(){
    $('#square1').css("visibility", "visible"); 
    $('#switch1').removeClass("off");  
});

$('#switch2').toggle(function() {
    $('#square2').css("visibility", "hidden");
    $('#switch2').addClass("off");
}, function(){
    $('#square2').css("visibility", "visible");
    $('#switch2').removeClass("off");      
}); });

CSS

#switch1, #switch2 {background:grey; border:1px solid; border-radius:4px; color:white; cursor:pointer; display:block; float:left; margin:0 3px 5px 0; padding:6px; text-align:center; text-decoration:none; width:50px;}
#switch1.off, #switch2.off {background:white; color:#ccc;}
ul#squares li {float:left; margin:0 3px; padding:6px;}
#square1 {background:green; height:20px; width:25px;}
#square2 {background:orange; height:20px; width:25px;}

Answer 1

$(function() { 

    $('#switch1').click(function() {
        if ($('#square1').is(":visible")) {
            if ($('#square2').is(":visible")) {
                $('#square1').hide();
                $('#switch1').addClass("off");
            }
        } else {
            $('#square1').show(); 
            $('#switch1').removeClass("off");  
        }
    });

    $('#switch2').click(function() {
        if ($('#square2').is(":visible")) {
            if ($('#square1').is(":visible")) {
                $('#square2').hide();
                $('#switch2').addClass("off");
            } 
        } else {
            $('#square2').show();
            $('#switch2').removeClass("off");      
        }
    });

});

测试:http://jsfiddle.net/qzjy6/

或者如果隐藏最后一个则显示另一个:http://jsfiddle.net/wvREX/