下图是一个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. P2042 [NOI2005]维护数列 && Splay区间操作（四）

    到这里 \(A\) 了这题, \(Splay\) 就能算入好门了吧. 今天是个特殊的日子, \(NOI\) 出成绩, 大佬 \(Cu\) 不敢相信这一切这么快, 一下子机房就只剩我和 \(zrs\) ...

  2. Tomcat权威指南-读书摘要系列2

    2. 配置Tomcat 2.1. 重定向Web应用程序的目录 将工程文件与Tomcat分离 复制conf和webapps文件夹到分离目录: 配置CATALINA_BASE环境变量,值为分离目录: 2. ...

  3. HTML常用标签-<body>内基本标签（块级标签和内联标签）

    HTML常用标签-<body>内基本标签(块级标签和内联标签) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.<hn>系列标签 n的取值范围是1~6,从 ...

  4. 翻译:GLSL的顶点位移贴图

    翻译:GLSL的顶点位移贴图 翻译自: Vertex Displacement Mapping using GLSL 译者: FreeBlues 说明: 之所以选择这篇文档, 是因为现在但凡提到位移贴 ...

  5. xpath定位中详解id 、starts-with、contains、text()和last() 的用法

    1.XPATH使用方法 使用XPATH有如下几种方法定位元素(相比CSS选择器,方法稍微多一点): a.通过绝对路径定位元素(不推荐!) WebElement ele = driver.findEle ...

  6. Linux 常见文件及目录

    文件/etc//etc/passwd用户基本信息/etc/group用户组基本信息/etc/shadow/etc/passwd 文件的补充/etc/gshadow阴影口令套组中的组配置文件/etc/l ...

  7. Linux命令-xargs

    比如一个例子 echo "README.md" |cat echo "README.md" |xargs cat 第一个例子只是输出了README.md的文件名 ...

  8. react-music React全家桶项目，精品之作！

    React-Music 全家桶项目,精品之作! 一.简介 该项目是基于React全家桶开发的一个音乐播放器,技术栈采用:Webpack + React + React-redux + React-ro ...

  9. 第二回 C#和JAVA 语法差异性对比

    1.继承  C#用 :  java用 extends 继承父类   implements 2.Java : 一个源文件中只能有一个public类  可以有多个非public类  源文件的名称应该和pu ...

  10. 判别式模型 vs. 生成式模型

    1. 简介 生成式模型(generative model)会对\(x\)和\(y\)的联合分布\(p(x,y)\)进行建模,然后通过贝叶斯公式来求得\(p(y|x)\), 最后选取使得\(p(y|x) ...