html右边折叠面板,2017IFE-使用CSS实现折叠面板

前言

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

任务目的

深入理解html中radio的特性

深入理解CSS选择器以及伪元素的使用

任务描述

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

实现

思路就是利用input[type=radio]所具有的单选特性,然后利用伪类或者伪元素来显示或者隐藏。

html中radio的特性

label它通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。

我这里是利用属性for来关联控件，而input[type=radio]就是单选按钮，这样我们就可以控制显示和隐藏的效果。

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson 。。。

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;

}

参考链接