单击其他Div后，将Div淡入可见/隐藏

Question

当我单击其他三个Divs之一时，如何在隐藏或可见之间进行Div更改。

例如，

的CSS

#red_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:50px;
 background-color:red;   
}

#green_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:150px;
 background-color:green;    
}

#yellow_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:50px;
 margin-left:150px;
 background-color:yellow;    
}

#blue_box {
 position:absolute;
 width:50px;
 height:50px;
 margin-top:150px;
 margin-left:50px;
 background-color:blue;    
}

的HTML

<div id="red_box"></div>
<div id="yellow_box"></div>
<div id="green_box"></div>
<div id="blue_box"></div>

我希望在单击其他任何一个时切换红色框的可见性。 因此，例如，如果用户单击黄色框，则红色框将消失，然后，如果用户单击绿色框，它将重新出现。 但是我需要它，以便他们可以按任意顺序单击这些框，并且每次单击一个框时，它都会使红色框可见或将其隐藏，这取决于它是否已隐藏或可见。

我希望这是有道理的。

我也对如何使用淡入淡出效果感到好奇，因此它不会逐渐消失或出现，而不是消失或出现红色框。

这是上面代码的JSFiddle 。

我不确定这是否可以仅通过CSS来实现，还是可以/应该使用JQuery来实现。 我也不确定是否会使用不透明度或显示效果： 标签，或两者都不是，或两者兼而有之。

谁能帮我？

Answer 1

假设我已经正确理解了您的意思，那么您想在每次单击其他框时淡入/淡出红色框。 如果是的话，您可以使用fadeToggle ：

$("div").not("#red_box").click(function() {
    $("#red_box").fadeToggle();
});

这是一个更新小提琴 。

如果您不关心淡入淡出，则可以使用常规的toggle方法。

Answer 2

您可以在下面使用jquery

在其他三个div（黄色，绿色，蓝色）中添加一些类，然后

$('.some').click(function(){
    $("#red_box").fadeToggle();
});

所以你的HTML将是

<div id="red_box"></div>
<div id="yellow_box" class="some"></div>
<div id="green_box" class="some"></div>
<div id="blue_box" class="some"></div>

Answer 3

可能是这样的：

$("div").on('click', function() {
    if (this.id != "red_box") {
        $('#red_box').fadeToggle(200);
    }
});

小提琴

Answer 4

就我所知，您不能仅使用CSS淡化任何内容。 用户交互也非常有限（ :hover和:focus ）。 您将需要Javascript。

好消息是它确实很简单。 只需向div中添加一个类，该类应切换红色框，然后添加以下Javascript以使其进行切换： http : //jsfiddle.net/J2uzU/

$('.togglesRed').click(function(){
    $('#red_box').fadeToggle();
});