CSS -基于CheckBox显示/隐藏元素

Question

我有一个项目中，我显示和隐藏的元素，使用复选框结合麻省理工学院的CSS只。下面的模式，另请参阅https://jsfiddle.net/37bqmbuo/，适用于我。

HTML：

<input class="switch-1" type="checkbox">
<input class="switch-2" type="checkbox">
<input class="switch-3" type="checkbox">
<div class="hidden-1 hidden-2">Info 1</div>
<div class="hidden-2 hidden-3">Info 2</div>
<div class="hidden-1 hidden-3">Info 3</div>
<div class="hidden-1">Info 4</div>
<div class="hidden-3">Info 5</div>

CSS：

.switch-1:checked ~ .hidden-1
{
   display: none;
}

.switch-2:checked ~ .hidden-2
{
   display: none;
}

.switch-3:checked ~ .hidden-3
{
   display: none;
}

但是我有的选择越多，我需要创建的类就越多。有没有更聪明的方法来只用CSS来实现这一点？

Answer 1

实际上，是有的。

将您想要作为目标的元素放在输入之后，如下所示：

<input type="checkbox" value="My Checkbox" />
<div class="toggle">Toggle me</div>

然后做一些CSS魔术：

input:checked + .toggle { display: none; }