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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>纯CSS实现百叶窗</title>
  6.         <style type="text/css">
  7.             * {
  8.                margin: 0;
  9.                padding: 0;
  10.                }
  11.  
  12.             #parent >li> span{background: #999999;display: block;width: 200px;border:1px solid #ECEEF2;}
  13.             li {line-height: 40px;display: block;}
  14.             li  p{
  15.                     display: inline-block;
  16.                     width: 0px;
  17.                     height: 0px;
  18.                     border-left: 5px solid transparent;
  19.                     border-right: 5px solid transparent;
  20.                     border-top: 5px solid#2f2f2f;
  21.                       }
  22.              li>ul{display: none;}
  23.              li>ul>li{border: 1px solid #DEDEDE;width: 199px;}
  24.              #parent span:hover + ul{display: block;}
  25.              #parent span:hover >p{
  26.                      display: inline-block;
  27.                     width: 0px;
  28.                     height: 0px;
  29.                     border-top: 5px solid transparent;
  30.                     border-bottom: 5px solid transparent;
  31.                     border-left: 5px solid#2f2f2f;}
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <ul id="parent">
  36.             <li>
  37.                 <span><p></p>列表</span>
  38.                 <ul>
  39.                     <li>子列表</li>
  40.                     <li>子列表</li>
  41.                     <li>子列表</li>
  42.                 </ul>
  43.             </li>
  44.             <li>
  45.                 <span><p></p>列表</span>
  46.                 <ul>
  47.                     <li>子列表</li>
  48.                     <li>子列表</li>
  49.                     <li>子列表</li>
  50.                 </ul>
  51.             </li>
  52.             <li>
  53.                 <span><p></p>列表</span>
  54.                 <ul>
  55.                     <li>子列表</li>
  56.                     <li>子列表</li>
  57.                     <li>子列表</li>
  58.                 </ul>
  59.             </li>
  60.         </ul>
  61.     </body>
  62. </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. MYSQL指定用户访问指定数据库

    1.使用navicat 1)首先使用root用户新建连接 2)新建mysql用户 3)点击权限,选择添加权限,出现MySQL中已存在的数据库列表,选择你要为该新建用户开放的数据库,此处选择“maiba ...

  2. 团体程序设计天梯赛 L1-011. A-B

    读入的是字符串,数组大小至少为字符串长度+1 #include <stdio.h> #include <stdlib.h> #include <string.h> ...

  3. python基础之函数进阶之函数作为返回值/装饰器

    因为装饰器需要用到返回函数的知识,所以在这里将返回函数和装饰器合并讲解. 什么是返回函数? 我们知道,一个函数中return可以返回一个或者多个值,但其实,return不仅可以返回值,还可以返回函数. ...

  4. K8S调度之节点亲和性

    Node Affinity Affinity 翻译成中文是"亲和性",它对应的是 Anti-Affinity,我们翻译成"互斥".这两个词比较形象,可以把 po ...

  5. NOIP2012 提高组 Day 1

    期望得分:100+100+70=270 实际得分:100+50+70=220 T2 没有底 最后剩余时间来不及打高精.思路出现错误 T1 Vigenère 密码 题目描述 16 世纪法国外交家 Bla ...

  6. 掌握Markdown

    翻译自 https://guides.github.com/features/mastering-markdown/ 转载请注明链接 掌握Markdown Markdown是Github平台上一种轻量 ...

  7. 谈谈动态地加载Jquery库文件的方法

    有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库. 好处不用 ...

  8. Flash数据的采集方法-搜房房价走势采集

    一般来说flash中的数据是不能被现有技术很容易采集到的,但是也不能谈flash色变,要具体问题具体分析,有些flash是可以通过一些分析发现背后的数据.然后采集就变得很容易了. 具体案例:搜房房价走 ...

  9. Linux基础-host文件解析

    任务目标:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名, 相应的集群的配置应该改成使用主机名的方式 使用 hostnamectl set-hostname 设定 ...

  10. 【译】第七篇 Integration Services：中级工作流管理

    本篇文章是Integration Services系列的第七篇,详细内容请参考原文. 简介在上一篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcur ...