Question

我正在尝试以下方法：

<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之上（彼此分开）。

我该怎么做？我在这里做错了什么？

Answer 1

将导航包裹在标题内：

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

Answer 2

感谢@BhojendraSah的回答。对我来说，它说：抱歉，这是不可能的 - 正如@dsfq在评论中已经说过的那样：

使用此HTML结构，:checked无法实现。{p> 复选框必须至少在header之外。

但我已经说过，我无法更改我的模板以在单个容器中制作。但是，如果没有这个，我就无法做到这一点。

所以我决定做B计划：

<nav class="top-navigation"> <input type="checkbox" class="menu-toggle"> <ul class="top-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> </ul> </nav>

并做一些额外的浮动和保证金工作人员：

.menu-toggle{ float: right; margin-top: -35px; /* as per my template */ margin-right: 20px; /* as per my template */ }

让我们觉得复选框在<header>范围内。非常感谢，我不接受Bhojendra的回答，因为我已经说过了，我现在实际上不能这样做了。谢谢Bhojendra。

如何使用CSS在两个div之间进行操作？

2 个答案: