Применение правил CSS на основе состояния флажка ввода

В настоящее время я разрабатываю сайт, который использует переменную:checked для применения правил к CSS. У меня есть флажок ввода, который при срабатывании должен выполнить две вещи. Первое, что он должен сделать, это расширить div с высоты от 0 до 200, когда отмечен, и обратно до 0, если не отмечен. У меня не было проблем с запуском этой первой задачи. Второе, что должно быть выполнено после установки флажка, - это преобразование: rotate(45deg) для div с " +", который должен повернуться на 45 градусов в " x " (не фактический x, а повернутый +).

В настоящее время у меня есть настройки кода для отображения анимации:hover, но это только для иллюстрации, чего не будет в моем конечном коде. Поэтому наведите курсор на " +", чтобы увидеть, что я пытаюсь выполнить с помощью: проверенного ввода.

Если вы захотите взглянуть на мой код и сказать, что я делаю неправильно, я был бы очень признателен! Дайте знать, если у вас появятся вопросы.

Примечание: в идеале я ищу чистое решение CSS без необходимости JS. Дайте мне знать, если это невозможно.

Вот мой код ручки.

Источник

2 ответа

Решение

Я написал подобное решение на днях здесь.

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

В этом примере .expand не был предшествующим родным братом. Поэтому решение состоит в том, чтобы разместить input элемент в корне документа, а затем использовать селектор input[name='panel']:checked ~ label .rotate изменить .rotate элемент. Обратите внимание, что общий брат и сестра комбинатор, ~ в настоящее время также используется в отличие от соседнего братского комбинатора, +,

Нет необходимости в JS - ОБНОВЛЕННЫЙ ПРИМЕР

Модифицированный HTML:

<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
  Click Me
  <div class="rotate">+</div>
</label>
<div class="expand">
  Content goes here.
</div>

Обновлен CSS:

input[name='panel']:checked ~ label .rotate {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

Стоит отметить, что я перенес свойства перехода в .rotate элемент тоже.

Источник

Решение jQuery:

http://jsfiddle.net/SinisterSystems/PUwh6/2/

Используйте ID так jQuery может легко определить, что вы делаете, не ища классов повсюду.

HTML:

<label for="panel">
  Click Me
  <div id="rotate">+</div>
</label>

CSS:

#rotate {
 width: 12px;
 float: right;
 font-size: 18px;
 margin-top: -6px;
 text-align: center;
 transition: all 1s ease;
 -o-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 }
#rotate.spin {
 transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

JQuery:

$('#panel').on('click',function() {
  $('#rotate').toggleClass('spin');
});
Источник
Другие вопросы по тегам