Question

当点击其他三个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完成。我也不确定它是否会使用不透明或显示：无;标签，或两者都不。或者两者兼而有之。

任何人都可以帮助我吗？

Answer 1

假设我理解正确，只要点击任何其他框，你就想淡入/淡出红色框。如果这是正确的，您可以使用fadeToggle：

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

这是一个update fiddle。

如果您不关心淡入淡出，则可以使用普通的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);
    }
});

fiddle

Answer 4

根据我的知识，你不能只使用CSS淡化任何东西。用户互动也非常有限（:hover和:focus）。你需要Javascript。

好消息是它非常简单。只需在应该切换红色框的div中添加一个类，然后添加以下Javascript以使它们切换：http://jsfiddle.net/J2uzU/

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

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

4 个答案: