下图是一个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. JDBC详解(一)

    一.相关概念介绍 1.1.数据库驱动 这里驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡,同样道理 ...

  2. Web前端之Javascript详解20180330

    一.javascript概述 javascript是基于对象和事件的脚本语言. 特点: 1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互 2.跨平台性(只 ...

  3. Centos 7安装Python3.6

    1> 安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel ...

  4. Nginx反向代理websocket配置实例(官网)

    https://www.nginx.com/blog/websocket-nginx/ Blog Tech Rick Nelson of NGINX, Inc.   May 16, 2014   NG ...

  5. KVM基本实现原理

    KVM 虚拟化技术概述 http://blog.csdn.net/yearn520/article/details/6461047 KVM 虚拟化技术在 AMD 平台上的实现 1.http://www ...

  6. JavaScript 运行机制之执行顺序详解

    JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解 JavaScript 语言的运行机制 ...

  7. 阿里云的OCS缓存机制

    OCS简介 OCS( Open Cache Service)为分布式高速缓存服务,主要实现热点数据的快速响应: OCS支持Key/Value的数据结构,兼容memcachebinary protoco ...

  8. POJ 3783 Balls --扔鸡蛋问题 经典DP

    题目链接 这个问题是谷歌面试题的加强版,面试题问的是100层楼2个鸡蛋最坏扔多少次:传送门. 下面我们来研究下这个题,B个鸡蛋M层楼扔多少次. 题意:给定B (B <= 50) 个一样的球,从 ...

  9. HDU 1846 Brave Game 巴什博奕

    解题报告:Alice和Bob在做一个取石子游戏,有一堆n个石子,然后规定每个人每次最少要去1个石子,最多可以取m个石子,最后一次取完石子的人为胜. 巴什博奕,关键是找到必胜点和必败点,我们可以先列举出 ...

  10. Pythagorean Triples（Codeforces Round #368 (Div. 2) + 构建直角三角形）

    题目链接: https://codeforces.com/contest/707/problem/C 题目: 题意: 告诉你直角三角形的一条边,要你输出另外两条边. 思路: 我们容易发现除2外的所有素 ...