что я пытаюсь заархивировать:
Я пытаюсь показать/скрыть мобильную панель навигации на своей веб-странице, в зависимости от того, установлен ли флажок или нет.
Требование состоит в том, чтобы не использовать javascript, поэтому я пытаюсь заархивировать его с помощью css.
#menuToggle:checked ~ #sub_navigation_wrapper {
display: none;
}
<nav>
<div id = "main_navigation_wrapper" >
<input type = "checkbox" id = "menutoggle">
<div id = "sub_navigation_wrapper" >
<a href = "#">
<div class = "fixedwidth">Home</div>
</a>
<a href = "#">
<div class = "fixedwidth">Informatics</div>
</a>
<a href = "#">
<div class = "fixedwidth">Projects</div>
</a>
<a href = "#">
<div class = "fixedwidth">About Me</div>
</a>
</div>
<label for = "menutoggle" class = "menu_icon_wrapper">
<img src = "/images/menu.png" alt = "Öffnet das Menü" class = "menu_icon"/>
</label>
</div>
</nav>
Скрипку можно найти здесь: https://jsfiddle.net/bechti44/au3gevp2/3/
При нажатии на иконку элементы меню должны исчезнуть:
Проблема:
Ничего не произошло. Я вижу, что флажок успешно установлен при нажатии на изображение, но CSS не применяется.
При попытке применить селектор css напрямую он работает:
#sub_navigation_wrapper {
display: none;
}
https://jsfiddle.net/bechti44/au3gevp2/4/
Любая идея, в чем проблема или как ее можно исправить?
да, тоже видел это... слишком быстро для меня.. спасибо Пит
@tacoshy Я пытался. «Вы не можете удалить этот вопрос, так как другие потратили время и усилия, чтобы ответить на него. Для получения дополнительной информации посетите справочный центр».
Вы неправильно назвали свой идентификатор в своем css, он должен быть menutoggle
, а не menuToggle
, просто скопируйте это в свой css, и он должен работать:
#menutoggle:checked ~ #sub_navigation_wrapper{
display: none;
}
Кроме того, если это не какой-то школьный проект, очень странное требование не использовать JS, ха-ха.
Голосование за закрытие как опечатка: заглавная t в переключателе css id, но маленькая t в html: jsfiddle.net/bzu4n3qt