敲出每个小例子是一种进步

html结构：

<body>

        <ul id="list">

            <li class="lis">

                <p>我的好友</p>

                <ul>

                    <li><a href="javascript:;">张三</a></li>

                    <li><a href="javascript:;">李四</a></li>

                    <li><a href="javascript:;">王丽</a></li>

                </ul>

            </li>

            <li class="lis">

                <p>我的朋友</p>

                <ul>

                    <li><a href="javascript:;">腾腾</a></li>

                    <li><a href="javascript:;">小红</a></li>

                    <li><a href="javascript:;">小明</a></li>

                </ul>

            </li>

            <li class="lis">

                <p>我的家人</p>

                <ul>

                    <li><a href="javascript:;">爸爸</a></li>

                    <li><a href="javascript:;">妈妈</a></li>

                    <li><a href="javascript:;">弟弟</a></li>

                </ul>

            </li>

        </ul>

    </body>

css样式：

#list{width:400px;overflow:hidden;margin: 0 auto;margin-top:50px;border: 10px solid #009;}

#list p{height: 40px;line-height: 40px;padding-left: 10px;background: #f80; cursor: pointer;}

#list ul{background: #999;display: none;}

#list ul li{height: 30px;line-height: 30px;padding-left: 10px;}

#list ul li.light{background: #00f;color: #fff;}

#list a{text-decoration: none;color: #ff0;}

js代码：

window.onload=function(){

                var oList=document.getElementById("list");

                var aUl=oList.getElementsByTagName("ul");

                var aP=oList.getElementsByTagName("p");

                var aLi=null;

                var arrLi=[];

                //li的高亮显示:获取所有的li

                for(var i=0;i<aUl.length;i++){

                    aLi=aUl[i].getElementsByTagName("li");

                    for(var j=0;j<aLi.length;j++){

                        arrLi.push(aLi[j]);

                    }

                }

                for(var i=0;i<arrLi.length;i++){

                    arrLi[i].onclick=function(){

                        for(var i=0;i<arrLi.length;i++){

                                arrLi[i].className='';

                        }

                        this.className='light';

                    }

                }

                for(var i=0;i<aP.length;i++){

                    //自定义属性

                    aP[i].index=i;

                    aP[i].onOff=true;

                    aP[i].onclick=function(){

                        //点击展开或者折叠对应的ul

                        /*if(this.onOff){

                            aUl[this.index].style.display="block";

                            this.onOff=false;

                        }else{

                            aUl[this.index].style.display="none";

                            this.onOff=true;

                        }*/

                        //类似于手风琴效果

                        if(this.onOff){

                            for(var i=0;i<aP.length;i++){

                                aUl[i].style.display="none";

                                aP[i].onOff=true;

                            }

                            aUl[this.index].style.display="block";

                            this.onOff=false;

                        }else{

                            for(var i=0;i<aP.length;i++){

                                aUl[i].style.display="none";

                            }

                            this.onOff=true;

                        }

                    }

                }

            }

效果截图

qq菜单的折叠与展示的更多相关文章

  1. ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2

    运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...

  2. android炫酷动画源码，QQ菜单、瀑布流、二维码源码

    Android精选源码 自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色 有深度感的fragment代码 在屏幕顶部或者底部显示提示 短信转发工具,自 ...

  3. Android实现高仿QQ附近的人搜索展示

    本文主要实现了高仿QQ附近的人搜索展示,用到了自定义控件的方法 最终效果如下 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollVi ...

  4. JAVAEE——BOS物流项目12：角色、用户管理，使用ehcache缓存，系统菜单根据登录人展示

    1 学习计划 1.角色管理 n 添加角色功能 n 角色分页查询 2.用户管理 n 添加用户功能 n 用户分页查询 3.修改Realm中授权方法(查询数据库) 4.使用ehcache缓存权限数据 n 添 ...

  5. 通用权限管理系统之权限菜单zTree树的展示及移动的处理方法

    在通用权限管理系统中,有很多数据结构是有父子关系的,如组织机构,部门,权限菜单等,在展示的时候,大多数是通过zTree树的形式展现的,如下: 权限菜单展示 这种数据后台输出比较容易处理,参考如下获取某 ...

  6. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  7. django权限二(多级菜单的设计以及展示)

    多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...

  8. flex 布局 实现电商网页菜单的多级分类展示

    用flex,实现多级菜单分类展示,这里记录一下,方便以后查阅. 效果展示如下: 跟上面floor的设计差不多,鼠标hover全部商品分类的时候,将下拉列表展示在指定区域,这个类似鼠标悬浮商品图片期待上 ...

  9. iOS天气动画、高仿QQ菜单、放京东APP、高仿微信、推送消息等源码

    iOS精选源码 TYCyclePagerView iOS上的一个无限循环轮播图组件 iOS高仿微信完整项目源码 想要更简单的推送消息,看本文就对了 ScrollView嵌套ScrolloView解决方 ...

随机推荐

  1. 关于ArcGIS API for JavaScript中basemap的总结介绍（一）

    实际上basemap这个概念并不只在arcgis中才有,在Python中有一个matplotlib basemap toolkit(https://pypi.python.org/pypi/basem ...

  2. Android M Permission 运行时权限 学习笔记

    Android M Permission 运行时权限 学习笔记 从Android 6.0开始, 用户需要在运行时请求权限, 本文对运行时权限的申请和处理进行介绍, 并讨论了使用运行时权限时新老版本的一 ...

  3. IOS 日期的简洁格式展示

    首先我要解释一下标题的意义,日期的简洁格式展示,之所以简介,是因为让人一目了然,不需要思考是什么时候. 在详细一点就是我们在微信朋友圈中 所看到的时间格式. 例如:刚刚 -几分钟前-几小时前等等. 今 ...

  4. ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】

    ASP.NET MVC 中 WebGrid 的 6 个重要技巧 https://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-t ...

  5. Ruby的模型关系随笔

    1 Class和Module的实例方法也就是所有具体类和具体Module的类方法,因为具体类和具体Module分别是Class和Module的实例.例如Object.new对应着Class#new,K ...

  6. MySQL server version for the right syntax to use near 'TYPE=MyISAM'

    最近将一个版本为4.0.18-Max的MySQL数据库迁移到5.6.20-enterprise-commercial-advanced上.好吧,这是我迄今为止,见到过的最古老版本的MySQL数据库,这 ...

  7. 在Ubuntu上单机安装Hadoop

    最近大数据比较火,所以也想学习一下,所以在虚拟机安装Ubuntu Server,然后安装Hadoop. 以下是安装步骤: 1. 安装Java 如果是新机器,默认没有安装java,运行java –ver ...

  8. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  9. 【java开发】数据类型

    ok,为期两天的ubuntu常用命令学习结束,现在开始java语言的学习. 上篇结尾说了ubuntu下的jdk文件安装,现在顺便说一下win下的jdk环境变量配置 在官网下载符合系统的jdk文件,可以 ...

  10. 漫谈C++11 Thread库之原子操作

    我在之前一篇博文<漫谈C++11 Thread库之使写多线程程序>中,着重介绍了<thread>头文件中的std::thread类以及其上的一些基本操作,至此我们动手写多线程程 ...