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

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. [Animatable Properties](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/AnimatableProperties/AnimatableProperties.html)

     

  2. .NET应用架构设计—面向查询服务的参数化查询设计（分解业务点，单独配置各自的数据查询契约）

    阅读目录: 1.背景介绍 2.对业务功能点进行逻辑划分(如:A.B.C分别三个业务点) 2.1.配置映射关系,对业务点配置查询契约(构造VS插件方便生成查询契约) 2.2.将配置好的映射策略文件放在调 ...

  3. ionic入门01

    总述 ionic是一个强大的混合式/hybrid HTML5移动开发框架,特点是使用标准的HTML.CSS和JavaScript,开发跨平台的应用. 接下来,敝人会从0到1采用ionic构建一个简单的 ...

  4. SQL Server 2008 R2——根据数据查找表名和字段名 根据脏数据定位表和字段

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  5. JavaScript中function的多义性

    JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...

  6. 打地鼠游戏iOS源码项目

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  7. [转]html超链接打开的窗口大小

    <a href="#" onclick="javascript:window.open('http://www.baidu.com','','height=20,w ...

  8. 用alarmmanager 多次发送PendingIntent

    遇到如下问题 service中得一随机数 用alarmmanager 发送PendingIntent的时候,receiver收到的随机数不变. pendingintent传值经常获取到的值是第一次的值 ...

  9. ik扩展支持Solr配置

    扩展ik原生代码:public class IKAnalyzerTokenizerFactory extends TokenizerFactory{ private boolean useSmart; ...

  10. strus2验证框架

    为什么要用验证框架? 当验证规划比较复杂时,Action类的代码江边的非常繁琐,假如我们要对电话号码进行验证,是非常麻烦的. 验证框架的优点 Struts2中内置了一个验证框架,将常用的验证规则进行了 ...