超实用的JavaScript代码段 Item2 --伸缩菜单栏
来源:互联网 发布:阿里云平台介绍ppt 编辑:程序博客网 时间:2024/05/17 21:56
伸缩菜单栏
点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0; font-size:13px; list-style:none;}.menu{width:210px; margin:50px auto; border:1px solid #ccc;}.menu p{height:25px; line-height:25px; font-weight:bold; background:#eee; border-bottom:1px solid #ccc; cursor:pointer; padding-left:5px;}.menu div ul{display:none;}.menu li{height:24px; line-height:24px; padding-left:5px;}</style> <script type="text/javascript"> window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var ps = document.getElementsByTagName("p"); var uls = document.getElementsByTagName("ul"); // 遍历所有要点击的标题且给它们添加索引及绑定事件 for(var i = 0, n = ps.length; i <n; i += 1){ ps[i].id = i; ps[i].onclick = function(){ for(var j = 0; j < n ; j += 1){ uls[j].style.display = "none"; } uls[this.id].style.display = "block"; } // 获取点击的标题上的索引属性,根据该索引找到对应的列表 } // 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来 } </script></head><body> <div class="menu" id="menu"> <div> <p>Web前端</p> <ul style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>jQuery</li> </ul> </div> <div> <p>后台脚本</p> <ul> <li>PHP</li> <li>ASP.net</li> <li>JSP</li> </ul> </div> <div> <p>前端框架</p> <ul> <li>Extjs</li> <li>Esspress</li> <li>YUI</li> </ul> </div> </div></body></html>
实例效果:
1 0
- 超实用的JavaScript代码段 Item2 --伸缩菜单栏
- 我们为什么要看《超实用的JavaScript代码段》???
- 超实用的JavaScript代码段 Item1 --倒计时效果
- JavaScript实用的代码段
- 《超实用的JavaScript代码段》可以参加京东买200-100的促销了
- 超实用的JavaScript代码段 Item6 -- 对Json的增删改属性
- 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
- 超实用的JavaScript代码段 Item3 --图片轮播效果
- 超实用的JavaScript代码段 Item4 --发送短信验证码
- 超实用的JavaScript代码段 Item3 --图片轮播效果
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
- 推荐10 个短小却超实用的 JavaScript 代码段
- 超实用的JavaScript代码段 Item7 -- “&&”和“||”操作符总结
- 推荐10 个短小却超实用的 JavaScript 代码段
- 推荐10 个短小却超实用的 JavaScript 代码段
- 推荐10 个短小却超实用的JavaScript 代码段
- 推荐10 个短小却超实用的 JavaScript 代码段
- 推荐10 个短小却超实用的 JavaScript 代码段
- 禁止鼠标全选住图片
- Hybrid 混合开发--基础储备--1
- JVM抛出OutOfMemory 的集中情况的解析
- SIFT中的尺度空间和传统图像金字塔【转】
- poj 3080 后缀树应用
- 超实用的JavaScript代码段 Item2 --伸缩菜单栏
- Hibernate和Mybatis对比(优缺点)
- Thrift
- Liunux下安装oracle客户端
- C语言之统计输入字符数量
- Android(7)ImageView:ScaleType属性(.FIT_CENTER/.FIT_START/.FIT_END/.CENTER./.CENTER_INSIDE/.CENTER_CR)
- php manual中的可修改范围
- mysql导出为CSV的同时加上表头
- [软件]_[Windows]_[实用系统工具类]