JS基础——伸缩菜单2
来源:互联网 发布:js让input不可编辑 编辑:程序博客网 时间:2024/06/05 08:48
<!doctype html><html><head><meta charset="utf-8"><title>JS——伸缩菜单2</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:#f4f4f4; }</style><script>window.onload = function(){var oUl = document.getElementById('list');var aH2 = oUl.getElementsByTagName('h2');var aUl = oUl.getElementsByTagName('ul');aLi = null;var arrLi = [];//点击伸缩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 = '';}};}//二次循环生成所有子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]);}}//点击当前子li,改变颜色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 = 'hover';}}};</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>
在之前的基础上,给子级的li添加背景色
其思路:
1.循环所有子级ul,然后获取当前ul下的所有li,并存放在变量aLi中,
2.循环所有aLi,然后将li push到数组arrLi中
3.循环所有的数组arrLi,然后为每个arrLi添加点击事件,接着来个for循环,清空所有arrLi的className,并给当前添加className
0 0
- JS基础——伸缩菜单2
- JS基础——伸缩菜单2
- JS基础——伸缩菜单
- JS基础——伸缩菜单3
- JS基础——伸缩菜单3
- JS基础——伸缩菜单
- JS伸缩的菜单 + 右键菜单
- Js-Html 前端系列--可伸缩菜单
- 导航栏《伸缩菜单的制作——水平方向》
- 垂直伸缩菜单——bootstrap手风琴嵌套
- 伸缩菜单
- PHP+JS无限级可伸缩菜单详解
- js菜单伸缩,点击打开弹出浏览窗口
- jQuery 导航菜单点击伸缩展开效果的JS特效
- 浮动,可伸缩菜单
- JavaScript伸缩的菜单
- 实现伸缩二级菜单
- 伸缩两级菜单
- “大数据”时代,什么是数据分析做不了的?
- Problem 004——UVa 340 - Master-Mind Hints
- 区间DP 整数划分
- 第11周项目2-求最大公约数(1)
- 剑法三套,程序员也能挣大钱(一)
- JS基础——伸缩菜单2
- 屏蔽<a>标签的href跳转功能
- C++宏定义
- Jasper Report 教程
- 基于任务队列的多线程
- 小波变换简介(1)
- Problem 005——UVa 1583 - Digit Generator
- Intent的URI及其示例
- mysql 的 find_in_set函数使用方法