Селектор CSS3, который работает как jcuery.click()?

Question

Я использую чистую CSS-навигацию уже несколько лет, и в последнее время мы начали создавать несколько мобильных сайтов в компании, в которой я работаю. Мне бы очень хотелось продолжать использовать чистый CSS, и обратите внимание, что я полагаюсь на jQuery, но на мобильном сайте выпадающее меню работает некорректно.

Есть ли что-то похожее на jQuery? .click(); событие в CSS3? По сути, когда пользователь нажимает на навигационную ссылку, я хочу, чтобы раскрывающийся список открывался и оставался открытым. Я пытался осмотреться, но не могу ничего найти.

Answer 1

Вы могли бы использовать :target селектор для некоторых основных функций. Смотрите сообщение Криса Койера об этом. Обратите внимание, поддержка браузера.

РЕДАКТИРОВАТЬ: сделал быстрое демо

Answer 2

Учитывая некоторые базовые структуры 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;
}

JS Fiddle demo.

С помощью :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;
}

JS Fiddle demo.

К сожалению, ближайший альтернативный нативный 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 ';
}

JS Fiddle demo.

Рекомендации:

• :checked ( совместимость).
• :target ( совместимость).

Answer 3

Попробуйте :active псевдо-класс. Это не полностью пуленепробиваемый, но вы должны быть в состоянии получить по крайней мере некоторые основные функции из него.

Answer 4

Попробуйте что-то подобное в своем CSS-коде...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }