CSS radio/checkbox单复选框元素显隐技术

曲奇饼

一、概述
我们使用CSS一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何JavaScript代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换效果，或是多级下拉列表效果等等。

本文将通过列举几个简单示例对这一技术做简单介绍。

二、CSS结合checkbox复选框实现展开收起效果

1. 核心CSS代码：
   
2. .test_checkbox,
   
3. .test_more,
   
4. .test_hide,
   
5. .test_checkbox:checked ~ .test_label .test_show {
   
6.     position:absolute;
   
7.     left: -999em;
   
8. }
   
9. 
   
10. .test_checkbox:checked ~ .test_more,
    
11. .test_checkbox:checked ~ .test_label .test_hide {
    
12.     position: static;
    
13. }
    
14. 主要HTML代码：
    
15. 【社交游戏的鲸鱼理论】...互动。
    
16. <input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
    
17. <span class="test_more">最后他们得出的结论...投资。</span>
    
18. <label class="test_label" for="testToggleCheckbox">
    
19.     <span class="test_hide">收起↑</span>
    
20.     <span class="test_show">展开↓</span>
    
21. </label>

复制代码

可以看到，点击“更多”模样的文字后，原本隐藏的文字显示出来了，同时，“更多”变成了“收起”；再次点击“收起”，又会还原成初始状态。所有这一切的交互都没有用到一丁点JavaScript，怎么实现的呢？

其中，最最关键的部分就是几个CSS3的选择器，demo页面上有CSS的核心源代码展示，如下：

1. .test_checkbox,
   
2. .test_more,
   
3. .test_hide,
   
4. .test_checkbox:checked ~ .test_label .test_show {
   
5.     position:absolute;
   
6.     left: -999em;
   
7. }
   
8. 
   
9. .test_checkbox:checked ~ .test_more,
   
10. .test_checkbox:checked ~ .test_label .test_hide {
    
11.     position: static;
    
12. }

复制代码

两个关键东东，一是伪类选择器:checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是弯弯符号~，这个符号表示选择后面的兄弟节点们。于是，两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了。

而如何让单复选框选中和不选中了，那就是label标签了哈，for属性锚定对应的单选框或是复选框，然后点击这里的label标签元素的时候，对应的单复选框就会选中或是取消选中。然后，就有上面的效果啦！

下面几个例子的原理类似。

三、CSS结合radio单选框下的选项卡切换效果

1. CSS代码：
   
2. .test_box {
   
3.     width: 50%;
   
4.     min-height: 250px;
   
5.     margin: 1em auto;
   
6.     position: relative;
   
7. }
   
8. .test_tab {
   
9.     width: 25%;
   
10.     margin-right: -1px;
    
11.     border: 1px solid #ccc;
    
12.     border-bottom: 0;
    
13.     float: left;
    
14. }
    
15. .test_label {
    
16.     display: block;
    
17.     padding-top: 5px;
    
18.     padding-bottom: 5px;
    
19.     background-color: #eee;
    
20.     text-align: center;
    
21. }
    
22. .test_radio,
    
23. .test_tab_content {
    
24.     position: absolute;
    
25.     left: -999em;
    
26. }
    
27. .test_radio:checked ~ .test_tab_content {
    
28.     margin-top: -1px;
    
29.     padding: 1em 2em;
    
30.     border: 1px solid #ccc;
    
31.     left: 0;
    
32.     right: 0;
    
33. }
    
34. .test_radio:checked ~ .test_label {
    
35.     background-color: #fff;
    
36.     border-bottom: 1px solid #fff;
    
37.     position: relative;
    
38.     z-index: 1;
    
39. }
    
40. HTML代码：
    
41. <div class="test_box">
    
42.     <div class="test_tab">
    
43.         <input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
    
44.         <label class="test_label" for="testTabRadio1">选项卡1</label>
    
45.         <div class="test_tab_content">
    
46.             <p>我是选项卡1对应的美女</p>
    
47.             <img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
    
48.         </div>
    
49.     </div>
    
50.     <div class="test_tab">
    
51.         <input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
    
52.         <label class="test_label" for="testTabRadio2">选项卡2</label>
    
53.         <div class="test_tab_content">
    
54.             <p>我是选项卡2对应的美女</p>
    
55.             <img src="//image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
    
56.         </div>
    
57.     </div>
    
58.     <div class="test_tab">
    
59.         <input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
    
60.         <label class="test_label" for="testTabRadio3">选项卡3</label>
    
61.         <div class="test_tab_content">
    
62.             <p>我是选项卡3对应的美女</p>
    
63.             <img src="//image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
    
64.         </div>
    
65.     </div>
    
66. </div>

复制代码

四、纯CSS下的多级下拉效果

资源范例: https://www.thecssninja.com/demo/css_tree/

这个例子中使用的有个选择器稍稍有差异，其不是使用的弯弯符号~，而是加号+，这两者的差别在于，加号+其选择相邻的后面的兄弟节点，而弯弯号~是全部后面的同级节点元素。