Исчезать Div для видимого / скрытого, когда щелкают другие Div - PullRequest
Новая
       9

Исчезать Div для видимого / скрытого, когда щелкают другие Div

0 голосов
/ 31 января 2012

Как мне изменить 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. Я также не уверен, будет ли он использовать прозрачность или отображение: нет; тег или ни того, ни другого.

Кто-нибудь может мне помочь?

Ответы [ 4 ]

1 голос
/ 31 января 2012

Вы не можете - насколько мне известно - выцветать, используя только CSS. Взаимодействие с пользователем также весьма ограничено (:hover и :focus). Вам понадобится Javascript.

Хорошая новость в том, что это действительно просто. Просто добавьте класс в div, который должен переключать красное поле, и добавьте следующий Javascript, чтобы они переключали его: http://jsfiddle.net/J2uzU/

$('.togglesRed').click(function(){
    $('#red_box').fadeToggle();
});
1 голос
/ 31 января 2012

Вы можете использовать ниже 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>
1 голос
/ 31 января 2012

Примерно так: 

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

скрипка

1 голос
/ 31 января 2012

Предполагая, что я вас правильно понял, вы хотите постепенно увеличивать / уменьшать красную рамку при каждом щелчке по любой другой ячейке. Если это правильно, вы можете использовать fadeToggle: 

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

Вот обновление скрипки .

Если вас не волнует затухание, вы можете использовать обычный метод toggle.

...