#checkbox:checked ~ элемент ничего не делает на веб-странице html с css

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

Требование состоит в том, чтобы не использовать 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/

Любая идея, в чем проблема или как ее можно исправить?

Голосование за закрытие как опечатка: заглавная t в переключателе css id, но маленькая t в html: jsfiddle.net/bzu4n3qt

Pete 18.12.2020 13:48

да, тоже видел это... слишком быстро для меня.. спасибо Пит

user8551329 18.12.2020 13:52

@tacoshy Я пытался. «Вы не можете удалить этот вопрос, так как другие потратили время и усилия, чтобы ответить на него. Для получения дополнительной информации посетите справочный центр».

julian bechtold 18.12.2020 16:58
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы неправильно назвали свой идентификатор в своем css, он должен быть menutoggle, а не menuToggle, просто скопируйте это в свой css, и он должен работать:

#menutoggle:checked ~ #sub_navigation_wrapper{

  display: none;

}

Кроме того, если это не какой-то школьный проект, очень странное требование не использовать JS, ха-ха.

Другие вопросы по теме