我正在尝试以下操作:

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

10-05 21:00
查看更多