label标签和任意高度元素展开收起的骚操作
标签为 input 元素定义标注（标记）。
元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
HTML:
1
2
3
4
5
6
7
| <input id="check" type="checkbox">
<p>:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。</p>
<div class="element">
<p>若指定了label标签的for属性和input标签的id属性相同的话，则可以实现两者的关联，在该例子里就是label也可以点击触发:checked</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /*把复选框隐藏掉*/
input[type="checkbox"]{
position: absolute;
clip: rect(0,0,0,0);/*clip属性裁剪出一个绝对定位元素的可见尺寸*/
}
/*实现任意高度元素展开收起 的骚操作*/
.element {
max-height: 0;
overflow: hidden;
transition: max-height 1.25s;
}
:checked ~ .element {
max-height: 666px; /*一个足够大的最大高度值*/
}
/*为了更美观，实现两个label的显示交替*/
:checked ~ .check-in{
display: none;
}
.check-out{
display: none;
}
:checked ~ .check-out{
display: block;
}
|