JS实现的竖向折叠菜单代码

本文实例讲述了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程序设计有所帮助。