У меня есть кнопка, чтобы переключить открытие и закрытие раскрывающегося меню с переходом CSS. Предположим, у меня есть этот HTML для выпадающего меню и кнопку переключения: < /p>
Вместо открытия/закрытия раскрывающегося списка NAV с помощью JS у меня есть минимальный JS, чтобы просто добавить/удалить класс.
Код: Выделить всё
#main-nav>ul {
display:none;
max-height:0;
overflow:hidden;
transition: height 0.5s linear;
}
#main-nav>ul.expanded {
display:block;
max-height: 100vh;
}
Проблема с приведенным выше кодом заключается в том, что открытие/закрытие не переходит/анимирует, потому что у меня есть свойство CSS, указанное в обоих состояниях. дисплей не может быть переходом/анимированным, и он сразу же переключается, когда класс добавлен/удален. Единственная проблема заключается в том, что меню скрыто только от пользователей (
= 0), но не предотвращаю доступ к меню. Когда пользователи используют навигацию клавиатуры, постукивая, пункты меню в меню все еще фокусируются, даже они заметно «скрыты». Я не нашел решение, чтобы отключить фокус с CSS. У меня нет чистого подхода CSS. Мой текущий отступление-применить изменение свойства дисплеев до/после того, как класс-вершина с задержкой с использованием JS, но я просто чувствую, что этот подход больше похож на патч для проблемы, а не на правильное решение. в доме. Выпадает, чтобы появиться/прятаться на пахни без JS было бы чрезвычайно сложно.
Подробнее здесь:
https://stackoverflow.com/questions/796 ... transition
Мобильная версия