1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。示例代码如下：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML HEAD TITLE新文档/TITLE META NAME=' Generator ' CONTENT=' EditPlus ' META NAME=' Author ' CONTENT=' META NAME=' Keywords ' CONTENT=' META NAME=' Description ' CONTENT='脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http 3360 jquery-1。8 .3 .量滴js /脚本样式类型='text/css '正文{font宽度width :301 pxoverflow : hidden } # DivFrame .clsHead {底色： # eepadd :8 px h8 :18 pxcursor : hand } # DivFrame .clsHead H3 { padd :0 pxmargin :0 pxfloat : left } # DivFrame .clsHead span { float : right margin-top :3 px } # DivFrame .cls内容{ padd :8 px } # DivFrame .cls内容ul {列表样式-类型：无；margin :0 pxpadding :0 px } # DivFrame .clsContent ul li { float:left宽度：95 pxheight :23 pxline-height :23 px } # DivFrame .clsBot { float : right padding-top :5 px；衬垫-底部：5px} .GetFocus {底色： # eee }/样式脚本类型=' text/JavaScript ' $(function(){//页面加载事件$('.clsHead ').单击(函数(){ //图片点击事件if($(').clsContent ').是(' :可见'){//如果内容可见$('.clsHead span img ' .attr('src '，' Images/a1。gif ')；//改变图片$('.clsContent ').css('display '，' none ')；//隐藏内容}else{ $(' .clsHead span img ' .attr('src '，' Images/a2。gif ')；//改变图片$('.clsContent ').css('display '，' block ')；//显示内容} });$('.clsBot a ').单击(函数(){ //热点链接点击事件if($(').clsBot a ').text()=='简化'){ //如果内容为'简化'字样$(“ul Li : gt(4):而不是(最后一个：)”).hide()；//隐藏指数号大于四且不是最后一项的元素$('.clsBot a ').文本('更多');//将字符内容更改为'更多} else { $(' ul Li : gt(4): not(: last)').显示()。添加类(' GetFocus ')；//显示所选元素且增加样式$('.clsBot a ').文本('简化');//将字符内容更改为'简化' } });});/script/HEAD BODY div id=' div frame ' div class=' clsHead ' H3图书分类/H3 span mg src=' http : IMages/a2。gif ' alt=' book！'//span/div class=' cls content ' ul lia href=' # '小说/ai (1110 ) /i/li lia href='# '文艺/ai (230 ) /i/li lia href='# '青春/ai (1430 ) /i/li lia href='# '少儿/ai (1560 ) /i/li lia href='# '生活/ai (870 ) /i/li lia href='# '社科/ai (1460 ) /i/li lia href='# '管理/ai (1450 ) /i/li lia href='# '计算机/ai (1780 ) /i/li lia href='# '教育/ai (930 ) /i/li lia href='# '工具书/ai (3450) /i/li lia href='# '引进版/ai (980 ) /i/li lia href='# '其它类/ai(3230)/I/Li/ul/div class=' ClsBot ' a href=' # '简化/a img src=' http : IMages/a 5。 gif ' alt=' '//div/div/BOdy/HTML 2，效果图

点击后

简化后