时间戳

首页 > 解决方案 > 选中复选框时应出现 css&html 导航栏

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

问题描述

我尝试使用两个同级选择器（~，如代码片段和+）在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>

标签： htmlcssnavchecked

解决方案

这是您的代码应该是什么样子，首先您有一个非封闭<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>

推荐阅读