当单击其他三个 Div 之一时,如何使 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 实现。我也不确定它是否会使用不透明度或显示:无;标签,或两者都没有,或两者兼而有之。
谁能帮帮我?
最佳答案
你可以在下面使用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>
关于jquery - 单击其他 Div 时将 Div 淡化为可见/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9079882/