前言
2017-百度前端技术学院编码任务:使用CSS实现折叠面板
任务目的
- 深入理解html中radio的特性
- 深入理解CSS选择器以及伪元素的使用
任务描述
- 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例),要求样式一致。
实现
思路就是利用input[type=radio]所具有的单选特性,然后利用伪类或者伪元素来显示或者隐藏。
html中radio的特性
label
它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性。
我这里是利用属性for来关联控件,而input[type=radio]
就是单选按钮,这样我们就可以控制显示和隐藏的效果。
<label for="headingOne" class="panel">Collapsible Group Item #1</label>
<input type="radio" id="headingOne" name="Collapsible" checked="checked" >
<div class="Accordion-box__content">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 。。。</div>
CSS选择器以及伪元素的使用
这里我没有使用伪元素去实现,假如每个内容是不一样的,通过元素来设置可以更好的自定义。
兄弟选择器(+ 和 ~)
a+b
元素a下一个兄弟元素b
a-b
元素a后面拥有共同父元素的兄弟元素b
.Accordion-box input[type=radio]:checked + div {
padding: 15px;
opacity: 1;
height: auto;
border-top: 1px solid #ddd;
}
参考链接
网友评论