jQuery实现了折叠和展开的菜单组效果代码

本文举例说明了jQuery中用于折叠和展开的菜单组效果代码。分享给大家参考。具体如下：

这是jQuery实现的一个漂亮的垂直折叠菜单组。第一次运行时请刷新页面，让jQ加载。这个菜单应用广泛，可以在网站后台左侧和前台使用。是从腾讯微博开放平台找到的，所以分享给大家研究一下。提示：如有错误，请刷新页面。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-淡入淡出-菜单-组-代码/

具体代码如下：

！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一个展开合拢的菜单效果/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式* { margin :0划水：0;}ul、李{列表式：无；}.目录{ width :164 pxmargin :0 auto } . t1 { height :4 pxbackground : URL(images/BG _ catalog。gif)左上方不重复；} .T2 {背景： URL(图片/BG _ catalog。gif)-164 px顶部重复-y；} . T3 { height :4 pxbackground : URL(images/BG _ catalog。gif)左下方不重复；} . T2 H2 { height :81 pxbackground : URL(images/BG _ catalog _ logo。gif)中心无重复；文本-缩进：-9999像素；} .t2 h3 { heigth:36px线高：36 pxmargin :0 1 extxt-缩进：26 px背景： URL(图片/BG _ catalog _ icon。gif)不重复13px 14pxfont-size :14 px边框-top:1px实心# fFF}。T2 ul { padd :10 px 0；font-size :12 px} .李；高度：30 px线高：30 px}.选定的{ display:block}。未选中{ display : none }/style/head dydiv class=' re _ left ' div class=' catalog ' div class=' t1 '/div div class=' T2 ' H2资源/H2 h3a href=' JavaScript : void(0)；'src='http:# '平台使用说明/a/H3 ul class=' unselect ' lia href=' # '平台介绍/a/li lia href='# '应用开发说明/a/li lia href='# '应用审核流程/a/Li Li样式=“显示：无”a href='# '成功案例/a/li lia href='# '开发者协议/a/Li/ul h3a href=' JavaScript : void(0)；'src='http:#'API说明/a/H3 ul class=' unselect ' lia href=' # ' API文档/a/li lia href='#'Oauth授权说明/a/li lia调用权限/a/Li/ul h3a href=' JavaScript : void(0)；'src='http:#'SDK及资源下载/a/H3 ul class=' unselect ' lia href=' # ' SDK下载/a/li lia href='# '视觉素材下载/a/Li/ul h3a href=' JavaScript : void(0)；'src='http:# '帮助中心/a/H3 ul class=' unselect ' lia href=' # '常见问题解答/a/li lia href='# '返回错误码说明/a/Li/ul/div class=' T3 '/div/div/div脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var catalogIndex=[0，0]；if(catalogIndex[0]==2){ catalogIndex[0]=3；} else if(catalogIndex[0]==3){ catalogIndex[0]=2；} if(catalogIndex。length==0){ catalogIndex=[0，0]；} $('.再左转。目录H3 a ' .每个（函数(){ $(此)).attr('src '，$(this).attr(' href ')；});$('.再左转。目录')。查找(' ul ').css(“”下边框',0)。end().find(' h 3: eq(' catalogIndex[0]')').addClass('open ').查找(' a ').attr('href '，' JavaScript : void(0)；').end().下一个()。css('显示'，'块').find(' Li : eq(' catalogIndex[1]-1==-1？9999:目录索引[1]-1)')').添加CLaSS(' active ')；$('.再左转。目录')。查找(' h3 ').最后()。css(“”边框-底部-宽度',' 0 ');});$('.再左转。目录')。查找(' h3 ').bind('click '，function(){ if ($(this)).有类(' open '){ if($(this).下一个()。查找('。活动')。size()==0) { $(this).下一个()。slideUp(500，函数(){ $(this)).prev().移除CLaSS(' open ')；});} else { $(this).下一个()。slideUp(500，函数(){ $(this)).prev().移除CLaSS(' open ')；//window.location.href=$(this).prev().查找(' a ').attr(' src ')；});} } else { $(this).父项()。查找(' ul ').向上滑动("慢")。end().查找(' h3 ').移除CLaSS(' open ')；$(这个)。addClass('open ').下一个()。向下滑动(500，函数(){ if ($(this)).nextAll('h3 ').size()0) {$(this).父项()。查找(' h3 ').最后()。css(“”边框-底部-宽度，' 1px ')；} else {$(this).父项()。查找(' h3 ').最后()。css(“”边框-底部-宽度',' 0 ');} window.location.href=$(this).prev().查找(' a ').attr(' src ')；});}返回false })；/scriptbrdiv align='center '提示：如果有错误，请刷新页面/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。