Селектор CSS3, который работает как jcuery.click()?
Я использую чистую CSS-навигацию уже несколько лет, и в последнее время мы начали создавать несколько мобильных сайтов в компании, в которой я работаю. Мне бы очень хотелось продолжать использовать чистый CSS, и обратите внимание, что я полагаюсь на jQuery, но на мобильном сайте выпадающее меню работает некорректно.
Есть ли что-то похожее на jQuery? .click();
событие в CSS3? По сути, когда пользователь нажимает на навигационную ссылку, я хочу, чтобы раскрывающийся список открывался и оставался открытым. Я пытался осмотреться, но не могу ничего найти.
4 ответа
Вы могли бы использовать :target
селектор для некоторых основных функций. Смотрите сообщение Криса Койера об этом. Обратите внимание, поддержка браузера.
РЕДАКТИРОВАТЬ: сделал быстрое демо
Учитывая некоторые базовые структуры HTML, вы можете воссоздать возможности переключения (показать / скрыть) реализаций JavaScript:
С помощью :target
:
HTML:
<nav id="nav">
<h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>
CSS:
nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
nav:target {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
С помощью :checked
:
HTML:
<input type="checkbox" id="switch" />
<nav>
<h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>
CSS:
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
label {
cursor: pointer;
}
К сожалению, ближайший альтернативный нативный CSS имеет :clicked
Селектор является :active
или же :focus
псевдоклассы, первый селектор которых перестанет совпадать, как только будет отпущена кнопка мыши, второй из них перестанет совпадать, как только данный элемент больше не будет фокусироваться (с помощью фокусировки клавиатуры или мыши в другом месте документа).
Обновлены демки, чтобы можно было переключать текст label
(используя сгенерированный контент CSS):
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
label {
display: inline-block;
cursor: pointer;
}
#switch ~ label::before {
content: 'Show ';
}
#switch:checked ~ label::before {
content: 'Hide ';
}
Рекомендации:
:checked
( совместимость).:target
( совместимость).
Попробуйте :active
псевдо-класс. Это не полностью пуленепробиваемый, но вы должны быть в состоянии получить по крайней мере некоторые основные функции из него.
Попробуйте что-то подобное в своем CSS-коде...
selector:hover, selector:active {
display:block;
height:100px;//test
width:200px; //test
border:solid 1px #000; //test
}