当复选框被选中时，css&html 导航栏应该出现 [英] css&html nav bar should appear when checkbox is checked

问题描述

我尝试使用两个同级选择器(~，如代码段中所示，以及 +)来使 nav 栏出现在复选框已选中，但不起作用，我也不知道还能做什么.

I've tried using the two sibling selectors (~, as in snippet, and +) to make the nav bar appear when the box is checked, but it doesn't work, nor do I know what else to do.

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>

推荐答案

这里是你的代码应该是什么样子，首先你有一个没有关闭的 <div> 标签和 + 兄弟 select 移动复选框上方的标签.

Here is what you code should look like, first you have a none closed <div> tag and for + sibling select move the label for the above the checkbox.

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 选择器更改为:

and if you want to have the same order for the tag change the CSS selector to this:

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>

这篇关于当复选框被选中时，css&html 导航栏应该出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！