效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=gb2312" /><title>柠檬酒店</title><style>/*设置导航每个主菜单的样式*/.main_nav{display:block;width:200px;padding:10px;font-weight:bold;background-color:#BADFF2;}li{list-style:none;}#globalNav{position:absolute;top:3px;left:2px;}/*导航中每个子菜单的样式*/#globalNavullia{margin:auto10px;display:block;width:140px;color:#fff;font-weight:bold;text-decoration:none;}#globalNavliullia{background:#6DBBE1;}#globalNavliullia:hover{background:#BCF2F0;<!--鼠标经过的颜色-->
}</style><scripttype="text/javascript" >functioninitTree(t) {var tree=document.getElementById(t);//生成树
tree.style.display="none";//设置样式为隐藏形式，不显示var lis=tree.getElementsByTagName("li");for(var i=0;i<lis.length;i++) {//取出主要的导航栏
lis[i].id="li"+i;var uls=lis[i].getElementsByTagName("ul");//子导航栏if(uls.length!=0) {
uls[0].id="ul"+i;
uls[0].style.display="none";var as=lis[i].getElementsByTagName("a");//子导航栏的内容
as[0].id="a"+i;
as[0].className="folder";
as[0].href="#this";
as[0].tget=uls[0];
as[0].onclick=function() {
openTag(this,this.tget);
}
}
}
tree.style.display="block";
}functionopenTag(a,t) {if(t.style.display=="block") {//点击一些展开，再点击一下折叠
t.style.display="none";
a.className="folder";
}else {
t.style.display="block";
a.className="";
}
}
window.onload=function() {
initTree("globalNav");
}</script></head><bodyid="index"><ulid="globalNav"><liclass="main_nav"><ahref="#">房间信息</a><ul><li><ahref="nullroom.php"target="mainFrame">空房</a></li><li><ahref="room.php"target="mainFrame">所有房间</a></li><li><ahref="orderroom.php"target="mainFrame">被订房间</a></li><li><ahref="register/room.html"target="mainFrame">录入房间信息</a></li></ul></li><liclass="main_nav"><ahref="#">房客信息</a><ul><li><ahref="register/custom.html"target="mainFrame">录入房客信息</a></li><li><ahref="custom_info.php"target="mainFrame">客史档案</a></li></ul></li><liclass="main_nav"><ahref="#">订单</a><ul><li><ahref="register/order.html"target="mainFrame">录入订单信息</a></li><li><ahref="order.php"target="mainFrame">查看订单</a></li></ul></li><liclass="main_nav"><ahref="#">会员</a><ul><li><ahref="register/member.html"target="mainFrame">录入会员信息</a></li><li><ahref="member.php"target="mainFrame">查看会员信息</a></li></ul></li><liclass="main_nav"><ahref="#">财务</a><ul><li><ahref="register/cash.html"target="mainFrame">录入财务信息</a></li><li><ahref="cash.php"target="mainFrame">查看财务信息</a></li></ul></li><liclass="main_nav"><ahref="login/login.html"target="_parent">退出</a></li></ul></body></html>