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

尝试以下解决方案：

＆＃13;

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

＆＃13;

<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>

＆＃13;

说明：使用您的解决方案，.nav-css元素必须是复选框（#toggleMenuToggle）的子元素。但在您的情况下，.nav-css是复选框的以下元素，因此您必须使用~。

Answer 2

您想使用+或~选择器。 +选择器选择相邻的兄弟，而~选择器选择所有兄弟元素。在这种情况下，选择哪一个并不重要。

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

有关选择器的详细解释，请参阅https://stackoverflow.com/a/26282459/6430127

Answer 3

您的css问题是.nav-css不是#toggleMenuToggle的孩子。

尝试以下方法：

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

~选择前面带有.nav-css元素的每个#toggleMenuToggle元素

选中检查时隐藏菜单

3 个答案: