jQuery实现的导航条切换可显示隐藏

用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle()，toggeClass()，toggle():

代码如下：

！DOCTYPE html html health eta charset=' utf-8 '标题导航条在项目中的应用/title脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http : jscript/jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $().tit ').查找(' span ').单击(function(){$(this)).toggleClass('closeBtn2 ').父项()。下一个()。slide Toggle()；//实现内容隐藏显示，及图标的切换}) ;$('.clsBot ').单击(function(){$(this)).父项()。find('li:gt(4)').toggle()；//实现内容索引值大于四的隐藏或者显示})})/脚本样式类型=' text/CSS ' * { margin : 0；padd : 0；} ul Li {列表式：无；}.盒子{宽度： 400pxmargin: 100px自动；border: 1px固体# ddd}。tit { background : # 999 height : 30pxcolor : # ffffffont-size : 14px；线高： 30px左填充左侧： 6px相对位置：}.关闭{背景：网址('图像/a 2。gif ')无重复0 0；宽度： 7px高度： 8px绝对位置：right : 10 xtop : 10 pxdisplay :块；文本-缩进：-9999像素；光标：指针；} .closebtn 2 {背景： URL(' Images/a1。gif ')无重复0 0；}.内容{ padd : 6px font-size : 12px；飞越：隐藏；}.内容li{左侧浮动：宽度： 100像素；高度： 24px}。内容阿利{ color: # 999}。内容li a:hover { color: red}。clsBot { display:块；clear:两者；背景： url('Images/a5.gif ')无重复权限0;填充-右侧： 16px向右浮动：宽度： 26px光标：指针；颜色：蓝色；}/style/head dydiv=' box ' div=' tit ' H2图书分类/h2span class='closeBtn '关闭/span/div class=' content ' ullia href=' # '小说/ai (1110 ) /i/lilia href='# '文艺/ai (230 ) /i/lilia href='# '青春/ai (1430 ) /i/lilia href='# '少儿/ai (1560 ) /i/lilia href='# '生活/ai (870 ) /i/lilia href='# '社科/ai (1460 ) /i/lilia href='# '管理/ai (1450 ) /i/lilia href='# '计算机/ai (1780 ) /i/lilia href='# '教育/ai (930 ) /i/lilia href='# '工具书/ai (3450 ) /i/lilia href='# '引进版/ai (980 ) /i/lilia href='# '其它类/ai(3230)/I/Li/ulspan class=' ClsBot '简化/span/div/div/body/html效果图