Форум Сайтостроение Веб-строительство

Проблема с чекбоксом и селектором +

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
514

Когда отмечаю чекбокс, скрытый текст в диве не появляется... почему? В чем ошибка?

<div class="FLAT HOUSE kuplu prodam snimu sdam">
<input type="checkbox" id="checkbox_newFlat0" name="z[newFlat]" value="READY">Новый дом (дом сдан)<br>
<input type="checkbox" id="checkbox_newFlat1" name="z[newFlat]" value="NOT_READY">Долевое (дом не сдан)<br>
<div id="checkbox_newFlats" class="checkbox_newFlats">
<h1>Этот текст был скрыт</h1>
</div>
</div>
<style>
.checkbox_newFlats {visibility: hidden; display: none;} /* предварительно меню свернуто */
/* показываем меню если отметили чекбокс */
#checkbox_newFlat0:checked + .checkbox_newFlats {display: block !important; visibility: visible !important;} 
</style>
S
На сайте с 02.05.2014
Offline
61
Sujcnm
#1
djdiplomat:
Когда отмечаю чекбокс, скрытый текст в диве не появляется... почему? В чем ошибка?

В данном примере нет скрипта, который сделает блок видимым.

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
#2
Sujcnm:
В данном примере нет скрипта, который сделает блок видимым.

А зачем тут скрипт?

В том то и фишка, что это безскриптовая штука! Магия CSS

Я кстати практически разобрался в причинах. ☝

Вот другой такой же пример. (Рабочий)

<input id="toggle-menu" type="checkbox" />
<div class="nav">
<ul class="topmenu">
<li><a href="/">Первый пункт меню</a></li>
<li><a href="/">Второй пункт меню</a></li>
</ul>
</div>

<input id="toggle-menu2" type="checkbox" />
<div class="nav">
<ul class="topmenu">
<li><a href="/">Первый пункт меню</a></li>
<li><a href="/">Второй пункт меню</a></li>
</ul>
</div>

.nav {visibility: hidden; display: none;} /* предварительно меню свернуто */
/* показываем меню, если нажали на кнопку, отметили чекбокс */
#toggle-menu2:checked + .nav {display: block; visibility: visible;} 
#toggle-menu:checked + .nav {display: block; visibility: visible;}

Единственная трабла. Что появляющийся блок должен следовать сразу за чекбоксом....

Т.е. если вперед чекбоксы, а потом дивы - пахать перестанет.... Пытаюсь это вылечить...

Т.е. селектор + как то странно работает...

C
На сайте с 19.02.2010
Offline
77
crystalbit
#3
djdiplomat:

Т.е. селектор + как то странно работает...

Символ + как раз используется только для соседних элементов. Тут скорее всего нужно другое решение

UPD. Или как вариант сделай в коде их соседними, а визуально уже манипулируй как хочешь)

djdiplomat
На сайте с 05.08.2009
Offline
136
djdiplomat
#4

Вроде нашел решение.

В первом примере заменил + на ~ ☝

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий