下图是一个Accordion组件，请用HTML+CSS实现其UI,并用面向对象的思路把折叠效果JS实现。如果能用纯css的方式实现其折叠效果更佳。PS/这是小米15年的一道校招笔试题，无意间看到就实现了一下。

这个题让最好用css实现，那就考察的知识点比较多啦！特别是css选择器这一块。具体实现代码如下。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>纯CSS实现百叶窗</title>

        <style type="text/css">

            * {

               margin: 0;

               padding: 0;

               }

            #parent >li> span{background: #999999;display: block;width: 200px;border:1px solid #ECEEF2;}

            li {line-height: 40px;display: block;}

            li  p{

                    display: inline-block;

                    width: 0px;

                    height: 0px;

                    border-left: 5px solid transparent;

                    border-right: 5px solid transparent;

                    border-top: 5px solid#2f2f2f;

                      }

             li>ul{display: none;}

             li>ul>li{border: 1px solid #DEDEDE;width: 199px;}

             #parent span:hover + ul{display: block;}

             #parent span:hover >p{

                     display: inline-block;

                    width: 0px;

                    height: 0px;

                    border-top: 5px solid transparent;

                    border-bottom: 5px solid transparent;

                    border-left: 5px solid#2f2f2f;}

        </style>

    </head>

    <body>

        <ul id="parent">

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

        </ul>

    </body>

</html>

用HTML+CSS实现--折叠效果的更多相关文章

  1. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

  2. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  3. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  4. jquery-练习-折叠效果

    <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  5. CSS实现折叠面板

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 使用CSS实现折叠面板总结

    任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例), ...

  7. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  8. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. java-----遇到问题------myeclipse----发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误

    情况 myeclipse发布项目到tomcat中lib文件夹没有子项目产生ClassNotFoundException错误. 这种情况一般是 .classpath文件设置的输出路径不对导致的. 1.. ...

  2. C++调Python示例(转载)

    C++调Python,代码粘贴如下: #include <iostream> #include <Python.h> using namespace std; void Hel ...

  3. 130. Surrounded Regions(M)

    130.Add to List 130. Surrounded Regions Given a 2D board containing 'X' and 'O' (the letter O), capt ...

  4. Service Fabric Cluster Manager

    作者:潘罡 (Van Pan)@ Microsoft 我们回到Service Fabric最底层的话题,谈谈Service Fabric是怎么工作的. 首先,我们回到下面的文档,看看Service F ...

  5. Swarm配置文件管理

    一.前言 Docker 17.06引入了swarm服务配置,允许您在服务映像外部或运行容器中存储非敏感信息,例如配置文件. 这允许您保持镜像尽可能通用,而无需将配置文件绑定到容器或使用环境变量.在Sw ...

  6. Docker Swarm高可用性

    一.前言 在Docker Swarm集群中,Swarm manager负责管理整个集群,如果管理节点manager出现故障,虽然不会影响现有的服务和工作节点,但是我们不能继续管理我们的docker s ...

  7. python的filter函数的使用方法详解以及使用案例，是否以什么结尾，是否大于什么(判断是True，则留下来)

    1.总共有3个人看电影,有2个人看电影经常说话,我们把他们两个过滤出去 move_people=["gouguoqi","beiye_sb","xiu ...

  8. P1978 集合

    P1978 集合 题目描述 集合是数学中的一个概念,用通俗的话来讲就是:一大堆数在一起就构成了集合.集合有如 下的特性: •无序性:任一个集合中,每个元素的地位都是相同的,元素之间是无序的. •互异性 ...

  9. 转：UIView的sizeToFit与sizeThatFits

    UILabel经常用到的方法- (void)sizeToFit- (CGSize)sizeThatFits:(CGSize)size解释如下: sizeToFit会自动调用sizeThatFits方法 ...

  10. jquery validate 增加过滤特殊字符的方法

    jQuery.validator.addMethod("specialCharFilter", function(value, element) { var pattern = n ...