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

Question

我有一个项目，我只使用复选框来显示和隐藏元素。以下模式，另见https://jsfiddle.net/37bqmbuo/，对我有用。

HTML：

$(window).on("unload", function(e) {
    // Do Something
});

CSS：

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

Answer 1

实际上，有。

在输入后放置您想要定位的元素，如下所示：

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

并做一些CSS魔术：

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