下图是一个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. 单点登录(六)-----遇到问题-----cas server 源码部署导入gradle后有感叹号---错误信息A cycle was detected in the build path of pr

    cas server 源码部署导入gradle后有感叹号---错误信息A cycle was detected in the build path of project 'cas-server-cor ...

  2. View的setLayerType() , setDrawingCacheEnabled() 方法用法

    一.Android开发:用getDrawingCache方法获取ImageView中的图像需要注意的问题http://www.linuxidc.com/Linux/2011-09/43131.htm ...

  3. Android 资源目录 相关知识 raw、 drawable、 values..

    一定要看的 Android 资源目录的相关知识 raw drwable valueshttp://blog.csdn.net/shichexixi/article/details/5985677 ht ...

  4. 【DP】【CF1099C】 Postcard

    Description 给定一个长度为 \(n\) 的字符串,尽可能包含小写字母,字符 '?' 和字符 '*'.保证上面两种特殊字符若出现则一定出现在一个小写字母的后面一位.要求构造一个长度为 \(k ...

  5. MySQL 第七篇：视图、触发器、事务、存储过程、函数

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  6. POI导入excel文件2

    POI上传到服务器读取excel文件1中已经介绍了上传文件和导入excel所有的内容http://www.cnblogs.com/fxwl/p/5896893.html , 本文中只是单单读取本地文件 ...

  7. 【题解】【THUSC 2016】成绩单 LOJ 2292 区间dp

    Prelude 快THUWC了,所以补一下以前的题. 真的是一道神题啊,网上的题解没几篇,而且还都看不懂,我做了一天才做出来. 传送到LOJ:(>人<:) Solution 直接切入正题. ...

  8. Git5：Git操作远程仓库

    目录 说明 一.git clone 二.git remote 三.git fetch 四.git pull 五.git push 说明 Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个 ...

  9. css overflow用法

    1. overflow-y: auto 侧边栏滚动效果:overflow-y:auto 2. overflow-y: scroll 如果使用overflow:scroll的话,滚动条就一直都在,页面不 ...

  10. tomcat启动时，内存溢出，Exception: java.lang.OutOfMemoryError thrown from the UncaughtExceptionHandler in thread "main"

     问题原因 通过tomcat启动项目,也许是因为项目太大,配置的内存不够用了.老是报内存溢出的问题. 解决办法 1.选中项目 右键 run as ->Run Configurations... ...