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

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. iOS程序破解——获取.ipa程序包

    原文在此 首先肯定不是获取自己的ipa包. 为什么要获取ipa包呢?比如,在仿写一些程序时,避免不了获取它的图片素材等等,那么最快也是最有效的方式就是获取原程序的ipa包.更或者,你想要逆向分析某一款 ...

  2. [C#6] 0-概览

    1. C#6 新特性图谱 C#6的新特性主要由编译器(“Roslyn”)带来,并不依赖CLR和.NET Framework的升级,我们可以认为这个版本的新语言特性的主要目的为了简化代码书写方式,让我们 ...

  3. svn报错：“Previous operation has not finished; run 'cleanup' if it was interrupted“ 的解决方法

    今天改完代码提交时,提交接近完成但窗口还未关闭电脑蓝屏了.夏天来了,电脑比人还怕热啊~~~   心里咯噔一下,估计svn又会出一些莫名其妙的问题了. 果然,待电脑重启后开eclipse,文件还是新增状 ...

  4. ImageView的ScaleType属性

    ImageView的ScaleType各种值代表的意义: CENTER:不进行任何缩放,将图片放在容器中间 CENTER_CROP:如果图片长宽都大于等于容器长宽,则图片不缩放,否则按固定长宽比缩放, ...

  5. expdp 报The value (30) of MAXTRANS parameter ignored错误的原因诊断

    在使用expdp导出一个表的数据时遇到了下面情况,也不见其提示报错信息,一下子就执行完了,也没有导出我需要的数据 [oracle@getlnx01 dump_dir]$ expdp system/xx ...

  6. MS SQL 需要定期清理日志文件

    前言碎语 关于对SQL SERVER 日志文件管理方面了解不多的话,可以参考我的这篇博客文章“MS SQL 日志记录管理”,不过这篇文章只是介绍对SQL SERVER日志记录的深入认知了解,并没有提出 ...

  7. Ant：build.xml 结构

     Ant build.xml 结构 project target task data property datatype v\:* {behavior:url(#default#VML);} o\:* ...

  8. ElasticSearch大数据分布式弹性搜索引擎使用

    阅读目录: 背景 安装 查找.下载rpm包 .执行rpm包安装 配置elasticsearch专属账户和组 设置elasticsearch文件所有者 切换到elasticsearch专属账户测试能否成 ...

  9. MongoDB学习笔记~ObjectId主键的设计

    回到目录 说一些关于ObjectId的事 MongoDB确实是最像关系型数据库的NoSQL,这在它主键设计上可以体现的出来,它并没有采用自动增长主键,因为在分布式服务器之间做数据同步很麻烦,而是采用了 ...

  10. markdown简要说明显示样式

    markdown 什么是markdown:     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.   Markdown具有一系列 ...