选中检查时隐藏菜单

Question

我正在尝试为移动菜单创建一个切换,但:checked选择器似乎不起作用.

这是代码:

#toggleMenuToggle:checked .nav-css {
  display: none;
}

<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label>
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle">
<ul id="dropdown-nav" class="nav-css">
  <li class="n1 current">
    <a class="n1">Test</a>
  </li>
</ul>

<ul>选中复选框时,不应该将它的显示设置为无？

Answer 1

尝试以下解决方案:

#toggleMenuToggle:checked ~ .nav-css {
  display: none;
}

<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label>
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle">
<ul id="dropdown-nav" class="nav-css">
  <li class="n1 current">
    <a class="n1">Test</a>
  </li>
</ul>

说明:使用您的解决方案,.nav-css元素必须是checkbox(#toggleMenuToggle)的子元素.但在你的情况下,.nav-css复选框的是以下元素,所以你必须使用~.