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

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

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

Ответ 1

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

EDIT: сделана быстрая демонстрация

Ответ 2

Учитывая некоторые основные структуры HTML, вы можете воссоздать возможности переключения (show/hide) реализации 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.

Литература:

Ответ 3

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

Ответ 4

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

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