刚学完jQuery选择器，闲来无事，照着书上的范例敲了一段代码(HTML和半铸钢钢性铸铁(铸造半钢)抄自书上),自己试着写了写jQuery的代码，感觉相当轻便啊。

显示效果：

功能说明：

1、点击上边的图书分类一栏，实现向下的伸缩扩展，可以控制分类的显示状态；

2、"简化"功能点击后实现分类显示菜单数量的简化，简化后，简化字样变成"展开";

3、页面中的两个红色箭头图标均为显示状态的图标，每次点击后都会变换相应的状态效果。

代码实现：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title meta name=' keywords ' content=' keywords '/meta name=' description ' content=' description '/head script type=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script style type=' text/CSS ' body { font-size 336013 px } # div frame { border 3360 solid 1px # 666；宽度width :301 pxoverflow : hidden } # DivFrame .clsHead {底色： # eepadd :8 pxh three :18 pxcursor : pointer } # 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 { background-color : # eee }/style body脚本类型=' text/JavaScript ' $(function(){ $(')' .clsHead ').单击(函数(){ if($(')).clsContent ').是(' :可见'){ $(').clsContent ').css('display '，' none ')；$('.clsHead span img ' .attr('src '，' a . gif ')；}else{ $(' .clsContent ').css('display '，' block ')；$('.clsHead span img ' .attr('src '，' a 2。gif ')；} });$('.clsBot ').单击(函数(){ if($('li:last ')).是(' :可见'){ $(' li: gt(5)').css('display '，' none ')；$('.clsBot a ').html(")展开');$('.clsBot img ').attr('src '，' a . gif ')；}else{ $('li:gt(5)').css('display '，' block ')；$('.clsBot a ').html(")简化');$('.clsBot img ').attr('src '，' a 2。gif ')；} });});/script div id=' DivFrame ' div class=' ClsHead ' H3图书分类/H3 span mg src=' http : a 2。gif ' alt=' '//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(235) /i/li lia href='# '生活/ai(7809) /i/li lia href='# '社科/ai(876) /i/li lia href='# '管理/ai(1234) /i/li lia href='# '计算机/ai(2434) /i/li lia href='# '教育/ai(234) /i/li lia href='# '工具书/ai(7665) /i/li lia href='# '引进版/ai(4557) /i/li lia href='# '其他类/ai(4543)/I/Li/ul div class=' ClsBot ' a href=' # '简化/a img src=' http : a 2。gif '/div/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。