仅使用CSS切换-选择下一个具有特定类的元素

Question

我需要单击“触发器”（选中复选框）时，内容（ul）以水平列表的形式出现在包装器的下方（红色和蓝色）。

看起来+ （下一个）不起作用，因为即使下一个元素也位于另一个父级中。

 .wrapper { position: relative; height: 130px; background: red; } .lp { color: $white; position: absolute; height: 100%; top: 0; right: 0; background: blue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .trigger { display:none;} .content { display: none; } .trigger:checked + .content { display: block; } 

 <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> <input type="checkbox" class="trigger" id="menu-toggle"/> </div> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

Answer 1

更新。 所以我做了一个快速演示。 希望这足以使您前进:)

 .checkbox:not(checked) { display: none; } .checkbox:not(checked) ~ .content { display: none; } .checkbox:checked ~ .content { display: block; } 

 <div class="wrapper"> <div class="lp"> <input type="checkbox" value="selected" id="1" class="checkbox"/> <label for="1" >Trigger</label> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

Answer 2

使用您已发布的代码，所有您需要做的就是移动input ，使其成为ul的上一个兄弟。

这样， 相邻的兄弟选择器 +将可以正常工作并切换隐藏的菜单

堆栈片段

 .wrapper { position: relative; height: 150px; background: red; } section { position: relative; } section .content { background: yellow; padding: 20px; } .lp { color: $white; position: absolute; height: 100%; width: 100px; top: 0; right: 0; background: lightblue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .lp .content { position: relative; transform: translateY(15px); padding-left: 18px; list-style: none; } .content, .trigger { display: none; } .trigger:checked+.content { display: block; } 

 <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> </div> <input type="checkbox" class="trigger" id="menu-toggle" /> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> 

---

如评论中所述，如果您的内容与.wrapper兄弟姐妹.wrapper并且也需要切换，则可以使用常规的兄弟姐妹选择器 ~ 。

为了使input能够“看到”这两个元素，请将其放在.wrapper之前。

堆栈片段

 .wrapper { position: relative; height: 150px; background: red; } section { position: relative; } section .content { background: yellow; padding: 20px; } .lp { color: $white; position: absolute; height: 100%; width: 100px; top: 0; right: 0; background: lightblue; } .lp .toggle { position: relative; top: 50%; transform: translateY(-50%); padding: 20px; } .lp .content { position: relative; transform: translateY(15px); padding-left: 18px; list-style: none; } .content, .trigger { display: none; } .trigger:checked ~ .wrapper .content, .trigger:checked ~ section .content { display: block; } 

 <input type="checkbox" class="trigger" id="menu-toggle" /> <div class="wrapper"> <div class="lp"> <div class="toggle"> <label for="menu-toggle"> <span>Trigger</span> </label> </div> <ul class="content"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </div> </div> <section> <div class="content"> Some other dummy text that will show... </div> </section>