选中复选框时应出现css html导航栏

【问题标题】：css&html nav bar should appear when checkbox is checked选中复选框时应出现css html导航栏
【发布时间】：2020-02-16 04:55:53
【问题描述】：

我尝试使用两个同级选择器（~，如 sn-p 和 +）在选中该框时显示 nav 栏，但它不起作用，也我知道还能做什么吗？

nav {
  left: -100%;
  position: fixed;
}

#check:checked~nav {
  left: 0;
}

<input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div>
<nav>
  <ul>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

【问题讨论】：

似乎工作正常：codepen.io/kostasx/pen/ExjKyxP
嗯..奇怪。我不得不承认我没有先使用过codepen，但不知何故，无论是VS Code还是Chrome在加载时都会出错，因为它在那里不起作用

标签： html css nav checked

【解决方案1】：

你的代码应该是这样的，首先你有一个没有关闭的<div>标签，对于+兄弟选择移动复选框上方的标签。

nav{
    left: -100%;
    position: fixed;

}

#check:checked + nav{
    left: 0px;
}

<label for="check"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="check">
    <nav>
    <ul><li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
    </ul>
    </nav>

如果您希望标签的顺序相同，请将 CSS 选择器更改为：

nav{
    left: -100%;
    position: fixed;
}

#check:checked + label + nav{
    left: 0px;
}

<input type="checkbox" id="check">
<label for="check"><i class="fas fa-bars"></i></label>
<nav>
  <ul>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

【讨论】：

好的！我会试试。关于div，我在发布之前忘记删除它，所以我很糟糕。谢谢！