本文实例讲述了jQuery实现的经典竖向伸缩菜单效果代码。分享给大家供大家参考。具体如下：

这是一款使用jquery1.3.2制作的竖向伸缩菜单，每点击一次主菜单，会拉开出对应的二级菜单，再次点击会合拢，效果非常不错。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-JD-v-show-menu-demo-codes/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title jquer 1。3 .2竖向的伸缩菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(' # wenzhangdddldd ')).hide()；$.每个($('#wenzhangdddldt ')、function(){ $(this).单击(function(){ $('#wenzhangdddldd ').不是($(这个)。next()).向上滑动()；$(这个)。下一个()。滑动切换(500);//$(这个)。下一个()。toggle()；});});});/scriptstyle type='text/css'dl，dd，dt，ul，li { margin:0划水：0;列表式：无；color: # 333} #张文{横向：300像素；文本对齐：居中；font-size :12 px边框-左侧：1px实心# dede border-right :1 px实心# dede border-bottom :1 px实心# dedede} #张文dd dl dt{ border-top:1px实心# dedede背景# f2f2f2height:25px线高：25 px字体粗细：加粗；} #张文ul {背景： # F9 F9 F9 f 9；} #李文章{ border-top :1 px solid # EFE fef；线高：25 px}/style/headbody dl id='张文dd dl dt脚本下载/dt dd ul liASP源码下载/李莉惠普源码下载/李源码下载/li /ul /dd /dl /dd dd dl dt网页特效/dt dd ul li菜单导航/li li层和布局洋/li li表单及按钮/li /ul /dd /dl /dd dd dl dt最新更新/dt dd ul li最新更新/li li下载排行/li li推荐下载/li /ul /dd /dl /dd /dl p如果初次运行，请刷新一次页面，调用了本站的jQuery，可能加载需要些时间/p/body/html希望本文所述对大家的jQuery程序设计有所帮助。