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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题竖向的折叠菜单/title脚本语言=JavaScript函数show menu(id){ var list=document。getelementbyid(' list ' id)；var菜单=文档。getelementbyid(' menu ' id)if(list。风格。display==' none '){文档。getelementbyid(' list ' id)。风格。display=' block菜单。类名=' title 1} else { document。getelementbyid(' list ' id)。风格。显示='无'；menu . class name=' title } }/script style type=' text/CSS '！-* { margin :0；划水：0;列表式：无；font-size :14 px } # nav { margin :10 px；文本对齐：居中；线高：25 px宽度宽度：200px}。title { background : # 336699 color : # fffborder-bottom :1 px实心# fffcursor:pointer指针指针；} . title 1 { background : # 888 color : # 000 border-bottom :1 px实心# 666;光标：指针指针；}.内容li { color: # 336699背景# dddborder-bottom:1px实心# fff }-/style/head dydiv id=' nav ' div class=' title ' id=' menu 1 ' onclick=' show menu(' 1 ')' Ajax下载/div div id=' list 1 ' class=' content ' style=' display : none ' ul Lijquery/Li liExtjs/Li liootols/Li/ul/div class=' title ' id=' menu 2 ' onclick=' show menu '(2)网页代码/div div id=' list 2 ' class=' content ' style=' display : none ' ul Li菜单导航/li li层和布局/li li图片切换/li /ul /div /div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。