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

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. scrollview 图片放大 捏合 瓦片地图 相关注意事项

    就职文博公司要为博物馆做APP 涉及到瓦片地图的编写 在这里总结一些开发中遇到的问题 (将会不断更新 也是学习阶段) 着急写项目的同学 可以直接看code4上现成的瓦片地图代码:http://www. ...

  2. (四)新建Maven项目

    我们以简单的helloworld来作为入门的实例,有些人说掌握了helloworld你就掌握了这门技术的一半了,对于maven来说,你掌握helloworld,你可能还稀里糊涂的. 1.从maven模 ...

  3. 一个C语言问题

    在这个题目中,你需要编写一个c++程序,要求输出以下内容:000000010010.....11101111(输出0到31的每个数的二进制表示,每行一个,前面的0也必须输出!) 1)部分代码已经为你完 ...

  4. SQL范式

    第一范式:确保每列的原子性(字段不可分). 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 释义: 1.每一列属性都是不可再分的属性值,确保每一列的原子性 ...

  5. 使用shell定时自动备份mysql数据库

    #!/bin/bash id="root" #用户名 pwd="123456" #密码 dbs="blog.ewsd.cn dangjian.ewsd ...

  6. 关于 Java 数组的 12 个最佳方法

    1.  声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...

  7. Python基础算法综合:加减乘除四则运算方法

    #!usr/bin/env python# -*- coding:utf-8 -*-#python的算法加减乘除用符号:+,-,*,/来表示#以下全是python2.x写法,3.x以上请在python ...

  8. android Bundle savedInstanceState用途

    经常会出现用户按到home键,退出了界面,或者安卓系统意外回收了应用的进程,这种情况下,使用Bundle savedInstanceState就可以用户再次打开应用的时候恢复的原来的状态 (以下转自: ...

  9. 深入java集合系列文章

    搞懂java的相关集合实现原理,对技术上有很大的提高,网上有一系列文章对java中的集合做了深入的分析, 先转载记录下 深入Java集合学习系列 Java 集合系列目录(Category) HashM ...

  10. linux特殊权限SUID、SGID、SBIT

    对于linux中文件或目录的权限,应该都知道普通的rwx权限(关于linux中rwx权限的看我的这篇博文http://www.cnblogs.com/javaee6/p/3994750.html).我 ...