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

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. [SharePoint]javascript client object model 获取lookup 类型的field的值，包括user类型（单人或者多人）的值。how to get the multiple user type/lookup type field value by Javascript client object model

    1. how to get value var context = new SP.ClientContext.get_current(); var web = context.get_web(); v ...

  2. jquery中CheckBox的checked状态用attr()的问题

    写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...

  3. iOS源代码管理工具

    源代码管理工具简介 1.为什么会出现源代码管理工具? 为了解决在软件开发过程中,由源代码引发的各种蛋疼.繁琐的问题 2.源代码管理不当可能会引起的后果? 无法后悔:做错了一个操作后,不能回到之前的操作 ...

  4. OAuth2.0 四种授权模式

    OAuth2.0简单笔记(四种授权模式) 金天:坚持写东西,不是一件容易的事,换句话说其实坚持本身都不是一件容易的事.如果学习有捷径,那就是不断实践,不断积累.写笔记,其实是给自己看的,是体现积累的一 ...

  5. MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)的真正原因

    在博客Linux mysql 5.6: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: N ...

  6. Automysqlbackup: WARNING: Turning off multicore support, since pigz isn’t there.

    在使用Automysqlbackup备份MySQL时,有时候你会在邮件里面看见"WARNING: Turning off multicore support, since pigz isn' ...

  7. Oracle 释放flash recovery area的四种方法

    早上收到一台Linux服务器磁盘告警邮件以及监控告警日志程序发来的邮件.检查过后,发现Linux服务器中一个分区没有空间了.主要原因是由于昨晚程序员做升级时,产生了大量的归档日志,导致联机重做日志无法 ...

  8. 迁移Reporting Services的方法与WMI错误

    今天上午,接到一个任务:迁移SQL SERVER 2005的报表服务到另外一台SQL SERVER 2008服务器,结果等我备份了两边服务器的ReportServer,ReportServerTemp ...

  9. Json学习笔记

    一．昨天内容回顾 创建ajax对象 a) 主流浏览器  new  XMLHttpRequest(); b) IE浏览器  new ActiveXObject("Msxml2.XMLHTTP. ...

  10. android nagative drawer图标跟标题适配

    <?xml version="1.0" encoding="utf-8"?> <resources> <string name=& ...