下图是一个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. bzoj 4519: [Cqoi2016]不同的最小割 最小割树

    怎么求一张无向图中任意两点之间的最小割? http://fanhq666.blog.163.com/blog/static/8194342620113495335724/ 一张无向图不同的最小割最多有 ...

  2. HDU--4099

    题目: Revenge of Fibonacci 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4099 分析:字典树的应用.在求Fibonacci的前 ...

  3. NAT ------ 为什么手动设置NAT端口映射（转发）不成功，导致访问不了局域网服务器

    手动设置端口映射成功的条件是路由器WAN口接的是外网IP,而不是网络提供商的路由器NAT之后的IP.假如有个外网的客户端,连的服务器IP一定要是外网IP(假设IP_A),如果自己的路由器WAN口接的是 ...

  4. LigerUI下拉选择列表LigerComboBox中tree的节点初始化默认选中的问题

    问题描述 用后台的Json传送tree的数据 前端用js方法来控制选中节点 此方法存在bug 实例: bug问题:无论设置的默认选中值是多少个,前台checkbox最多只显示选中一个,但是内容框中显示 ...

  5. Centos6.6系统root用户密码恢复案例

    1.重新启动主机后,在出现Grub菜单时按上下键取消倒计时 2.进入到内核引导界面按e键如下所示: 3.将鼠标定位到Kernel这一行按e键 4.在行尾输入”single”也可以换成字母”s”或者数字 ...

  6. OpenStack 认证服务 KeyStone部署（三）

    Keystone 介绍 Keystone作用: 用户与认证:用户权限与用户行为跟踪: 服务目录:提供一个服务目录,包括所有服务项和相关Api的断点 SOA相关知识 Keystone主要两大功能用户认证 ...

  7. SFTP上传下载文件、文件夹常用操作

    SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd  d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...

  8. MacBook Air网络问题

    自从买了本本之后,一直觉得无线网连接不能正常使用,最开始觉得是网络不给力,因为图标都没有满格.后来搬家,网速家里的window,iphone设备都能正常使用,就我的mac 本本图标显示满格,但是网页打 ...

  9. bzoj千题计划142：bzoj3144: [Hnoi2013]切糕

    http://www.lydsy.com/JudgeOnline/problem.php?id=3144 如果D=2 ,两个点,高度为4,建图如下 #include<queue> #inc ...

  10. bzoj千题计划122：bzoj1034: [ZJOI2008]泡泡堂BNB

    http://www.lydsy.com/JudgeOnline/problem.php?id=1034 从小到大排序后 最大得分: 1.自己最小的>对方最小的,赢一场 2.自己最大的>对 ...