JQuery伸缩导航练习示例

最近在学习JQuery，尝试制作了这个导航

下载：代码复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title伸缩导航/title link rel='样式表type=' text/CSS ' href=' nav。CSS ' script type=' text/JavaScript ' src=' http : jquery-1。10 .2 .js '/script脚本类型=' text/JavaScript ' src=' http : nav。js/script/head body div=' navigator ' ul class=' tab ' Li class=' tab 1 '导航卡1/h3 ul class='nav1' li子项目1/李莉子项目2/李莉子项目3/李莉子项目4/li /ul /li li class='tab2' h3导航卡2/h3 ul class='nav2' li子项目1/李莉子项目2/李莉子项目3/李莉子项目4/li /ul /li li class='tab3' h3导航卡3/h3 ul class='nav3' li子项目1/李莉子项目2/李莉子项目3/李莉子项目4/li /ul /li /ul /div /body /html复制代码代码如下： /** *作者LY 2013-11-11 22:30 * */* {保证金3360 0；padd : 0；字体系列： '微软雅黑，' Arial' } .导航器{ width: 180pxdisplay:块；边距-top : 30px；左边距左： 30px边框-top: 10px实心# dddborder-bottom: 10px实心# ddd左边框： 3px实心# ddd右边框： 3px实心# ddd背景# ddd}。选项卡{ list-style:无；} .标签li { clear:两者；飞越：汽车；} .tab李{ padd : 0；margin :0 font-size : 14px；高度： 40px线高： 40px文本对齐：中心；宽度： 180像素；光标：指针；背景# 07 fcolor : # fffborder-bottom : 1 px实心# ccc}。制表符李：最后一个子{边框：无；} .选项卡李。当前{背景： # 6af} .tab Li ul {左边距： auto右边距：自动；宽度： 160像素；高度： 0px列表样式：无；飞越：隐藏；} .标签li ul li { height: 30px线高： 30px背景技术# eeepadding : 5pxborder-bottom : 1 px实心# ccccccursor :指针；} 复制代码代码如下：美元（文件)。ready(function(){ $(。nav 1 ').css(“”高度，' 160 px ')；$('.制表符li h3:first ').添加CLaSS(' current ')；$('.制表符李').单击(函数(){ $(').制表符李').removeClass(“”当前');$(这个)。添加CLaSS(' current ')；$('.制表符li ul ').动画({height:'0'}，' fast ')；$(这个)。下一个()。动画({height:'160'}，' slow ')；});});