CSS radio/checkbox单复选框元素显隐技术
一、概述我们使用CSS一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何JavaScript代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换效果，或是多级下拉列表效果等等。
本文将通过列举几个简单示例对这一技术做简单介绍。
二、CSS结合checkbox复选框实现展开收起效果
核心CSS代码：
.test_checkbox,
.test_more,
.test_hide,
.test_checkbox:checked ~ .test_label .test_show {
position:absolute;
left: -999em;
}
.test_checkbox:checked ~ .test_more,
.test_checkbox:checked ~ .test_label .test_hide {
position: static;
}
主要HTML代码：
【社交游戏的鲸鱼理论】...互动。
<input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
<span class="test_more">最后他们得出的结论...投资。</span>
<label class="test_label" for="testToggleCheckbox">
<span class="test_hide">收起↑</span>
<span class="test_show">展开↓</span>
</label>
可以看到，点击“更多”模样的文字后，原本隐藏的文字显示出来了，同时，“更多”变成了“收起”；再次点击“收起”，又会还原成初始状态。所有这一切的交互都没有用到一丁点JavaScript，怎么实现的呢？
其中，最最关键的部分就是几个CSS3的选择器，demo页面上有CSS的核心源代码展示，如下：
.test_checkbox,
.test_more,
.test_hide,
.test_checkbox:checked ~ .test_label .test_show {
position:absolute;
left: -999em;
}
.test_checkbox:checked ~ .test_more,
.test_checkbox:checked ~ .test_label .test_hide {
position: static;
}
两个关键东东，一是伪类选择器:checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是弯弯符号~，这个符号表示选择后面的兄弟节点们。于是，两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了。
而如何让单复选框选中和不选中了，那就是label标签了哈，for属性锚定对应的单选框或是复选框，然后点击这里的label标签元素的时候，对应的单复选框就会选中或是取消选中。然后，就有上面的效果啦！
下面几个例子的原理类似。
三、CSS结合radio单选框下的选项卡切换效果
CSS代码：
.test_box {
width: 50%;
min-height: 250px;
margin: 1em auto;
position: relative;
}
.test_tab {
width: 25%;
margin-right: -1px;
border: 1px solid #ccc;
border-bottom: 0;
float: left;
}
.test_label {
display: block;
padding-top: 5px;
padding-bottom: 5px;
background-color: #eee;
text-align: center;
}
.test_radio,
.test_tab_content {
position: absolute;
left: -999em;
}
.test_radio:checked ~ .test_tab_content {
margin-top: -1px;
padding: 1em 2em;
border: 1px solid #ccc;
left: 0;
right: 0;
}
.test_radio:checked ~ .test_label {
background-color: #fff;
border-bottom: 1px solid #fff;
position: relative;
z-index: 1;
}
HTML代码：
<div class="test_box">
<div class="test_tab">
<input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
<label class="test_label" for="testTabRadio1">选项卡1</label>
<div class="test_tab_content">
<p>我是选项卡1对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
<label class="test_label" for="testTabRadio2">选项卡2</label>
<div class="test_tab_content">
<p>我是选项卡2对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
<label class="test_label" for="testTabRadio3">选项卡3</label>
<div class="test_tab_content">
<p>我是选项卡3对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
</div>
</div>
</div>
四、纯CSS下的多级下拉效果
资源范例: https://www.thecssninja.com/demo/css_tree/
这个例子中使用的有个选择器稍稍有差异，其不是使用的弯弯符号~，而是加号+，这两者的差别在于，加号+其选择相邻的后面的兄弟节点，而弯弯号~是全部后面的同级节点元素。
页:
[1]