本文实例讲述了jQuery实现幻树形下拉菜单特效，实现自动伸缩，分享给大家供大家参考。

运行jQuery树形下拉菜单特效效果图：

为大家分享的jQuery树形下拉菜单代码如下

标题常用的jquery下拉菜单/title脚本类型=' text/JAVAScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function() { $(')).菜单标题').单击(function(){ $(this)).下一个(' div ').滑动切换("慢")。兄弟(' .菜单内容：可视').向上滑动("慢");$(这个)。切换类(“活动标题”)；$(这个)。兄弟姐妹('。activeTitle ').移除CLaSS(' ActiVe title ')；});});/scriptstyle type='text/css '正文{边际：0背景色： # 9ad 075} .容器{宽度：100%;文本对齐：居中；} .菜单标题{宽度：148像素宽度：25像素背景-image : URL(图像/展开。gif)；margin:0汽车线高：25 pxfont-size :12.7 px字体粗细：加粗；color: # 43860ccursor:pointer指针指针；页边距-top :6 px；} .activeTItle { width :148 pxh three :25 px背景-图像： URL(图像/文件夹。gif)；margin:0汽车线高：25 pxfont-size :12.7 px字体粗细：加粗；color: # 43860ccursor:pointer指针指针；页边距-top :6 px；} .menuContent {底色： # fff余量：0自动高度：自动宽度宽度：148 pxtext-向左对齐：显示： one } Li {背景： URL(图片/arr。gif)无重复20px 6px列表样式-:型无；padd :0 px 0px 0px 38px font-size :12.7 px；高度：20 px线高：20 px} ul { margin:0划水：0;}/style/head dydiv class=' container ' div class=' MenuTitle '资源库div class=' menuContent ' ul阿利href='# '欢迎访问/a/li lia href='//www.jb51.net/'我们/a/Li liaJB 51。net/list/index _ 1。' htm '网络编程/a/Li/ul/div class=' MenuTitle '文章模块div class=' menuContent ' ul阿利href='# '前端技术/a/li阿利数据库/a/Li/ul/div class=' MenuTitle '下载模块div class=' menuContent ' ul阿利href='//www.jb51.net/'我们/a/li阿利源码下载/a/li阿利电子书籍/a/li /ul /div/div/body/html

以上就是为大家分享的jQuery树形下拉菜单代码，希望大家可以喜欢。