JS实现的竖向折叠菜单代码
2015-10-21 00:00
1056 查看
本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考,具体如下:
先来看看运行效果截图:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-hxzd-menu-demo/
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>竖向的折叠菜单</title> <script language = JavaScript> function showmenu(id) { var list = document.getElementById("list"+id); var menu = document.getElementById("menu"+id) if (list.style.display=="none") { document.getElementById("list"+id).style.display="block"; menu.className = "title1"; }else { document.getElementById("list"+id).style.display="none"; menu.className = "title"; } } </script> <style type="text/css"> <!-- *{margin:0;padding:0;list-style:none;font-size:14px} #nav{margin:10px;text-align:center;line-height:25px;width:200px;} .title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;} .title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;} .content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;} --> </style> </head> <body> <div id="nav"> <div class="title" id="menu1" onclick="showmenu('1') ">Ajax下载</div> <div id="list1" class="content" style="display:none"> <ul> <li>jQuery</li> <li>Extjs</li> <li>Mootools</li> </ul> </div> <div class="title" id="menu2" onclick="showmenu('2')">网页代码</div> <div id="list2" class="content" style="display:none"> <ul> <li>菜单导航</li> <li>层和布局</li> <li>图片切换</li> </ul> </div> </div> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章推荐
- JavaScript函数的调用以及参数传递
- 详解JavaScript操作HTML DOM的基本方式
- JavaScript简单遍历DOM对象所有属性的实现方法
- Javascript刷新窗口方法小结
- JavaScript对象数组的排序处理方法
- JavaScript对HTML DOM使用EventListener进行操作
- JavaScript操作HTML元素和样式的方法详解
- 深入解析JavaScript中的数字对象与字符串对象
- 深入剖析JavaScript编程中的对象概念
- freemarker 解析 json
- Javascript 对象的操作
- JavaScript实现界面上方可删除广告层
- json-c库使用总结
- Ember.js 入门指南——model的关联关系处理
- javascript 杂类收集
- Javascript的对象
- ArcGIS for Server内置JS Viewer的离线部署和配置
- Javascript调试利器console的使用
- js 遮罩层 loading 效果
- [Django模板系统]在模板中加载css/js等静态文件