用HTML+CSS实现--折叠效果

下图是一个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>
时间: 2024-10-22 22:08:35

用HTML+CSS实现--折叠效果的相关文章

css实现漂亮的文字滑动折叠效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

jquery-练习-折叠效果

<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bind折叠效果</title> <script type="text/

【转】Jquery折叠效果

转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

bootstrap实现分栏选择性显示和折叠效果

bootstrap为我们提供了非常丰富的js插件和css样式,如何运用bootstrap来实现分栏选择行显示和折叠效果,如下所示: 1.分栏显示 <!doctype html> <html> <head> <!--导入bootstrap样式--> <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"&

使用CSS实现折叠面板总结

任务目的 深入理解html中radio的特性 深入理解CSS选择器以及伪元素的使用 任务描述 使用input的radio单选框特性结合CSS中的伪元素实现bootstrap中折叠面板(点击查看样例),要求样式一致. 任务注意事项 当其中一个面对折叠时,其他面板需要隐藏 只能使用HTML,CSS,不允许使用JavaScript 注意测试不同情况,尤其是极端情况下的效果 有能力的同学在面板折叠或者展开时添加动画效果 参考资料 MDN label: 了解html中label的基本知识 MDN Adja

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

css 实现评分效果

css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上稍有偏差. 我的理解:有人认为background-position  的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置, 可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html