美文网首页IFE-2017Web前端之路让前端飞
2017IFE-使用CSS实现折叠面板

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

作者: 朋友喜欢叫我春哥 | 来源:发表于2017-06-07 10:02 被阅读113次

    前言

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

    任务目的

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

    任务描述

    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. 相邻兄弟选择器

    相关文章

      网友评论

      本文标题:2017IFE-使用CSS实现折叠面板

      本文链接:https://www.haomeiwen.com/subject/vysofxtx.html