JS基础——伸缩菜单
2014-11-10 15:52
260 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS——伸缩菜单</title> <style> ul , h2 { padding:0; margin:0; } li { list-style:none; } #list { width:240px; border:1px solid #ccc; border-top:none; margin:0 auto; } #list h2 { font-size:14px; border-top:1px solid #ccc; height:30px; line-height:30px; text-indent:20px; background:url(images/arr1.gif) no-repeat 5px center #eee; color:#000; cursor:pointer;} #list .active { background:url(images/arr2.gif) no-repeat 5px center #ddd; color:#000; } #list ul { display:none; } #list ul li { line-height:24px; border-top:1px solid #ccc; text-indent:24px; } #list ul .hover { background:#6FF; } </style> <script> window.onload = function(){ var oUl = document.getElementById('list'); var aH2 = oUl.getElementsByTagName('h2'); var aUl = oUl.getElementsByTagName('ul'); for(var i = 0; i<aH2.length; i++){ aH2[i].index = i; aH2[i].onclick = function(){ if(this.className == ''){ aUl[this.index].style.display = 'block'; this.className = 'active'; }else{ aUl[this.index].style.display = ''; this.className = ''; } }; } }; </script> </head> <body> <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> <li class="lis"> <h2>企业好友</h2> <ul> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> </ul> </li> <li class="lis"> <h2>黑名单</h2> <ul> <li>阿猫</li> <li>阿狗</li> </ul> </li> </ul> </body> </html>
思路:
1.获取相关元素
2.循环遍历所有的H2,并为每个H2添加索引
3.为每个H2添加点击事件,通过H2当前的className判断是否为空来显示隐藏ul,或添加删除当前H2的className
相关文章推荐
- JS基础——伸缩菜单3
- JS基础——伸缩菜单2
- JS特效代码(三)可折叠的自动伸缩菜单
- Js 竖直伸缩菜单(百度)
- js基础运用-右键菜单
- PHP+JS无限级可伸缩菜单详解(简单易懂)
- html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)
- js基础-input对象,select对象,实例:二级联动菜单
- Js+Css打造的红色经典伸缩菜单代码
- html用js实现导航栏的二级菜单,自动伸缩。。。
- Js-Html 前端系列--可伸缩菜单
- js菜单伸缩,点击打开弹出浏览窗口
- JS字随鼠标移动,伸缩菜单,搜索引擎,删表格列
- JS实现横向拉伸动感伸缩菜单效果代码
- Js 竖直伸缩菜单(百度)
- 原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
- 关于伸缩菜单js代码正确实现
- JS与JQ基础练习---侧栏二级菜单操作
- JS实现横向拉伸动感伸缩菜单效果代码
- PHP+JS无限级可伸缩菜单详解(简单易懂)