jQuery制作效果超棒的手风琴折叠菜单

拉风的jQuery制作的手风琴折叠菜单，效果非常不错！这里是之前版本的改进版，主要是jquery代码改进

演示图：

main.js

$(function(){ var tmp=null，$title=$(').title ')，$con=$(' .标题ul’)；$title.click(function(){ $(tmp)).儿童(' ul ').向上滑动()。end().孩子们。箭头')。removeClass(“”向上箭头');$(这个)。儿童(' ul ').slideToggle().end().孩子们。箭头')。addClass(')向上箭头');tmp=这个；});$ con . click(function(){ return false；//阻止事件冒泡});});index.html

！DOCTYPE html html lang=' en ' head title jquery js CSS html/title meta charset=' utf-8 '/link rel='样式表href=' CSS/style。CSS头身！-侧栏- div类='侧栏ul li class='title'span一、HTML5基础教程/span span class=' arrow '/span ul class=' in-sidebar ' lia target=' _ blank ' href=' http://www .久妮。com。cn ' html 5基础教程1/a/li lia href='#'HTML5基础教程2/a/li lia href='#'HTML5基础教程3/a/li lia href='#'HTML5基础教程4/a/li lia href='#'HTML5基础教程5/a/li /ul /li "标题"跨度二、CSS3基础教程/span span class=' arrow '/span ul class=' in-sidebar ' lia href=' # ' CSS3基础教程1/a/li lia href='#'CSS3基础教程2/a/li lia href='#'CSS3基础教程3/a/li lia href='#'CSS3基础教程4/a/li lia href='#'CSS3基础教程5/a/li /ul /li "标题"跨度三、Javascript基础教程/span span class=' arrow '/span ul class=' in-sidebar ' lia href=' # Java Script语言基础教程1/a/li lia href='#'Javascript基础教程2/a/li lia href='#'Javascript基础教程3/a/li lia基础教程4/a/li lia基础教程5/a/li /ul /li "标题"跨度四、节点基础教程/span span class=' arrow '/span ul class=' in-sidebar ' lia href=' # ' NodeJs基础教程1/a/li lia href='#'NodeJs基础教程2/a/li lia href='#'NodeJs基础教程3/a/li lia href='#'NodeJs基础教程4/a/li lia href='#'NodeJs基础教程5/a/li /ul /li "标题"跨度五、IOS基础教程/span span class=' arrow '/span ul class=' in-sidebar ' lia href=' # ' IOS基础教程1/a/li lia href='#'IOS基础教程2/a/li lia href='#'IOS基础教程3/a/li lia基础教程4/a/li lia基础教程5/a/li /ul /li /ul /div脚本src=' http : js/jquery-1。 8 .3 .量滴js /脚本脚本src=' http : js/main。js /脚本/body/htmlstyle.css

/*globle*/ul，Li { margin : 0；padd : 0；列表样式类型：无；}一个{显示：内联块；宽度： 100%;高度： 31px文本装饰：无；color : # ffffont-size : 13px；} a :悬停{背景： # 52718 a；}/*侧边栏*/。侧边栏{ width : 210 pxh8 : 335 pxmargin 3360 50px自动；边界半径： 5pxfont: 14px '新宋体；颜色： # F4 F4；}.标题{宽度： 95%；线高： 32px边框-底部： 1px实心# ccc背景# 1ABC9Ccursor:指针；}.title span { margin-left : 10px；}/*边栏中*/。侧边栏内{宽度： 100%；显示器：无；}.侧栏内李{宽度： 100%；高度： 32px背景技术# 34495E线高： 32px文本对齐：中心；边框-底部： 1px实心# ddd}/*箭头*/。向右箭头{ float:display:内联块；右边距： 5px宽度： 20px高度： 32px背景：网址(./img/down.png)无重复中心；}.向上箭头{ background: url(./img/up.png)无重复中心；}以上所述就是本文给大家分享的全部内容了，希望能够对大家学习jQuery有所帮助。