我正在尝试以下操作:
<header>
<input type="checkbox" class="menu-toggle">
</header>
<nav class="top-navigation">
<ul class="top-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</nav>
我的CSS如下:
.top-menu{
display: none;
}
.menu-toggle:checked .top-menu{
display: block;
}
但我没能做到。我也试过:
.menu-toggle:checked ~ .top-menu
但也失败了。
如果我能把
input[checkbox]
放在<nav>
内,我就能让它工作。但实际上为了模板化,我需要把它放在HTML上面(彼此分开)。我该怎么做?我在这里做错什么了?
最佳答案
像这样把你的导航包在头部:
<header>
<input type="checkbox" class="menu-toggle">
<nav class="top-navigation">
<ul class="top-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</nav>
</header>
只有你才能使用:
.top-menu{
display: none;
}
.menu-toggle:checked + .top-navigation .top-menu{
display: block;
}
.top-menu{
display: none;
}
.menu-toggle:checked + .top-navigation .top-menu{
display: block;
}
<header>
<input type="checkbox" class="menu-toggle">
<nav class="top-navigation">
<ul class="top-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</nav>
</header>