2017IFE-使用CSS实现折叠面板

前言

2017-百度前端技术学院编码任务：使用CSS实现折叠面板

任务目的

• 深入理解html中radio的特性
• 深入理解CSS选择器以及伪元素的使用

任务描述

• 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例)，要求样式一致。

DEMO

项目地址

实现

思路就是利用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;
        }

---

参考链接

1. label

2. 相邻兄弟选择器