html - #checkbox:checked ~ item 在带有 css 的 html 网页中什么都不做

Question

我尝试存档的内容：
我正在尝试在我的网页中显示/隐藏移动导航栏，这取决于是否选中了复选框。

要求特别是不使用 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/

知道问题是什么或如何解决？

标签： htmlcss

Answer 1

您在 css 中将您的 id 命名为错误，它应该是menutoggle，而不是menuToggle，只需将其复制到您的 css 中，它应该可以工作：

#menutoggle:checked ~ #sub_navigation_wrapper{

  display: none;

}

另外，除非是为了一些学校项目，否则不使用JS是一个非常奇怪的要求哈哈。