本文实例讲述了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 id="menu1">Ajax下载</div> <div id="list1"> <ul> <li>jQuery</li> <li>Extjs</li> <li>Mootools</li> </ul> </div> <div id="menu2">网页代码</div> <div id="list2"> <ul> <li>菜单导航</li> <li>层和布局</li> <li>图片切换</li> </ul> </div> </div> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
【JS实现的竖向折叠菜单代码】相关文章：
★ jquery实现点击label的同时触发文本框点击事件的方法