单元8 设计内容展开与折叠类网页特效

单元8设计内容展开与折叠类网页特效JavaScript+jQuery网页特效设计任务驱动教程（第2版）名校名师精品系列教材人民邮电出版社学会设计内容展开与折叠类网页特效熟悉BOM（浏览器对象模型），掌握浏览器对象模型的层次结构重点掌握window对象、document对象及其属性和方法一般掌握screen对象、location对象、history对象和navigator对象等浏览器对象及其属性和方法熟悉jQuery的尺寸方法教学目标pedagogicalobjectives目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效网页0801.html中可折叠与展开的网页内容如图1所示，单击按钮，即可折叠网页内容，单击按钮，即可展开网页内容，如图2所示。图1图2网页0801.html中主要应用的CSS代码如表所示。序号程序代码0102030405060708091011121314#refilter{width:207px;border:2pxsolid#ddd;}#refilter.item{background:#fff;position:relative}#refilter.itemh3{border-top:#ccc1pxdotted;background:#fafafa;overflow:hidden;cursor:pointer;序号程序代码1516171819202122232425262728line-height:24px;height:24px;padding:3px6px3px36px;}#refilter.itemb{background:url(images/search01.jpg)no-repeatbackground-position:-78px-339px;}#refilter.itemb{margin-top:1px;left:10px;overflow:hidden;任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效序号程序代码2930313233343536373839404142434445464748width:16px;cursor:pointer;position:absolute;top:7px;height:16px}#refilter.itemul{border-top:1pxdotted#ccc;display:none;overflow:hidden;zoom:1;padding:4px0px4px18px;}#refilter.hoverb{background-position:-61px-339px}#refilter.hoverul{display:block}任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效网页0801.html中折叠与展开网页内容对应的HTML代码如表所示。序号程序代码01020304050607080910111213141516171819202122232425<divclass="wmain"><divclass="left"><divclass="m"id="refilter"><divclass="mt"><h2>所有类目</h2></div><divclass="mc"><divclass="itemforehover"><h3><b></b>图书<span>（28）</span></h3><ul><li><s></s>教材教辅<span>（19）</span></li><li><s></s>计算机与互联网<span>（6）</span></li><li><sclass="tree-last"></s>艺术<span>（1）</span></li></ul></div><divclass="item"><h3><b></b>电子书<span>（1）</span></h3><ul><li><sclass="tree-last"></s>教材教辅<span>（1）</span></li></ul></div></div></div></div></div>任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效网页0801.html中实现折叠与展开网页内容特效的JavaScript代码如表所示。序号程序代码010203040506070809101112<scripttype="text/javascript">$("#refilter.itemh3").each(function(){$(this).click(function(){vare=$(this).parent();if(e.hasClass("hover")){e.removeClass("hover")}else{e.addClass("hover")}})});</script>目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效网页0802.html中商品类型的初始状态如图1所示。单击“展开”超链接，展开商品类型的第一层，如图2所示。图1网页0802.html中商品类型的初始状态图2展开商品类型的第一层单击“展开更多”超链接，展开每一种商品分类的全部内容，如图3所示。图3展开每一种商品分类的全部内容任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效网页0801.html中实现折叠与展开网页内容特效的JavaScript代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divid="z_index_201208"><divclass="z_product_nav"><aclass="qubu"href="">全部特卖</a><aclass=""href="">护肤<span>(632)</span></a><aclass=""href="">彩妆<span>(90)</span></a><aclass=""href="">香水<span>(72)</span></a><aclass=""href="">洗浴护体<span>(55)</span></a><aclass=""href="">美发护发<span>(22)</span></a><aclass=""href="">男士护理<span>(30)</span></a><aclass=""href="">精油芳疗<span>(2)</span></a><aclass=""href="">美容工具<span>(7)</span></a><!--当是全部时，显示“展开”--><aclass="zhankai"id="parentFilterPucker"onclick="showMore(this,'subFilterList’)”href="javascript:void(0)">展开</a></div><divclass="clear"></div><divclass="z_product_nav_open"id="subFilterList"style="display:none;"><!--品牌筛选--><divclass="nav_open"><pclass="nav_open_tit"><aclass="nav_open_tit1">按品牌筛选</a><aclass="nav_open_tit2"href="">全部</a></p><pclass="nav_open_con"><aclass=""href="">玫琳凯</a><aclass=""href="">欧莱雅</a><aclass=""href="">美宝莲</a><aclass=""href="">迪奥</a>任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效序号程序代码2425262728293031323334353637383940414243444546<aclass=""href="">雅诗兰黛</a><aclass=""href="">美体小铺（进口）</a><aclass=""href="">THEFACESHOP</a><aclass=""href="">谜尚</a><aclass=""href="">韩国SKINFOOD</a><aclass=""href="">蒙芭拉</a><aclass=""href="">查名</a><!--全部数据--><aclass="dis_brand"style="display:none"href=""isshow="false">娥佩兰</a><aclass="dis_brand"style="display:none"href=""isshow="false">火烈鸟</a><aclass="dis_brand"style="display:none"href=""isshow="false">贝玲妃</a><aclass="dis_brand"style="display:none"href=""isshow="false">卡姿兰</a></p><!--当总数大于8时，才显示“展开更多”--><pclass="nav_open_open"><aclass="more"id="more_brand"onclick="showFilter(this,'dis_brand')"href="javascript:void(0)">展开更多</a></p></div><!--分类筛选--><divclass="nav_opennav_center"><pclass="nav_open_tit"><aclass="nav_open_tit1">按分类筛选</a><aclass="nav_open_tit2"href="">全部</a></p><p>……</p><pclass="nav_open_open"><aclass="more"id="more_type"onclick="showFilter(this,'dis_type')"href="javascript:void(0)">展开更多</a></p></div><!--功效筛选--><divclass="nav_open">任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效序号程序代码474849505152535455<pclass="nav_open_tit"><aclass="nav_open_tit1">按功效筛选</a><aclass="nav_open_tit2"href="">全部</a></p><p>……</p><pclass="nav_open_open"><aclass="more"id="more_efficacy"onclick="showFilter(this,'dis_efficacy')"href="javascript:void(0)">展开更多</a></p></div></div></div>网页0802.html中实现多层折叠与展开网页内容的JavaScript代码如表所示。序号程序代码010203040506070809101112//大类目收起functionshowMore(me,id){vartxt=$(me).text();varcls=$(me).attr('class’);$("#"+id).toggle();if(txt=="展开"){txt="收起";cls="shouqi";}elseif(txt=="收起"){任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效序号程序代码131415161718192021222324252627282930313233343536txt="展开";cls="zhankai";}$(me).text(txt);$(me).attr('class',cls);}//筛选项控制functionshowFilter(me,id){vartxt=$(me).text();$('.'+id).each(function(){if($(this).attr('isshow')=='true’){$(this).css('display','none’);$(this).attr('isshow','false’);txt="展开更多";}else{$(this).css('display','block’);$(this).attr('isshow','true’);txt="收起更多";}});$(me).text(txt);}8.1BOM（浏览器对象模型）浏览器对象就是网页浏览器本身各种实体元素在JavaScript代码中的体现。使用浏览器对象可以与HTML文档进行交互，其作用是将相关元素组织起来，提供给程序设计人员使用，从而减轻编程工作量。当打开网页时，首先看到浏览器窗口，即window对象，window对象指的是浏览器本身。浏览器会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他相关信息。01OPTION浏览器对象模型的层次结构8.1BOM（浏览器对象模型）JavaScript对象的层次结构中，最顶层的对象是窗口对（window），它代表当前的浏览器窗口。第1层次窗口对象window之下是地址（location）、屏幕（screen）、文档（document）、历史（history）、事件（event）等对象第2层次文档对象之下包括链接（link）、图像（image）、表单（form）、锚对象（anchor）、MIME类型对象（mimeType）等对象第3层次表单对象之下包括文本框（text）、按钮（button）、复选框（checkbox）、提交按钮（submit）、单选按钮（radio）等对象。第4层次8.1BOM（浏览器对象模型）window对象代表当前窗口，是每一个已打开的浏览器窗口的父对象，包含了document、navigator、location、history等子对象。所有浏览器都支持window对象，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。甚至HTMLDOM的document也是window对象的属性之一。window对象及其属性和方法02OPTIONwindow.document.getElementById("demo");也可以写成以下形式。document.getElementById("demo");8.1BOM（浏览器对象模型）document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象，如图像、表单等。document对象及其属性和方法03OPTIONall属性：表示文档中所有HTML标记符的数组。bgColor属性：用于获取或设置网页文档的背景颜色。fgColor属性：用于获取或设置网页文本颜色（前景色）。linkColor属性：用于获取或设置未单击过的链接颜色。alinkColor属性：用于获取或设置激活链接的颜色。vlinkColor属性：用于获取或设置已单击过链接的颜色。title属性：用于获取或设置网页文档的标题，等价于HTML的<title>标记。forms属性：表示网页文档中所有表单的数组。write()方法：其功能是将字符或变量值输出到窗口。close()方法：将窗口关闭。8.1BOM（浏览器对象模型）window.screen对象包含有关用户屏幕的信息，window.screen对象在编写程序时可以不使用window这个前缀。screen对象及其属性04OPTIONwidth和height属性分别返回屏幕的最大宽度和高度，与屏幕分辨率对应。availWidth属性返回用户屏幕可用工作区的宽度，单位为像素，其值为屏幕宽度减去界面特性，如窗口滚动条的宽度。availHeight属性返回用户屏幕可用工作区的高度，单位为像素，其值为屏幕高度减去界面特性，如窗口任务栏的高度。8.1BOM（浏览器对象模型）location对象表示窗口中显示的当前网页的URL，可以使用该对象让浏览器打开某网页。window.location对象用于获得当前页面的URL，并把浏览器重定向到新的页面。window.location对象在编写时可不使用window这个前缀。location对象及其属性和方法05OPTIONhostname属性：返回Web主机的域名。path属性：返回当前页面的路径和文件名。port属性：返回Web主机的端口（80或443）。protocol属性：返回所使用的Web协议（网址中的http://或https://）。href属性：设置或返回当前页面的URL。pathname属性：返回URL的路径名。assign()方法：加载新的文档。reload()方法：重新加载当前页。8.1BOM（浏览器对象模型）history对象表示窗口中最近访问网页的URL。window.history对象包含浏览器的历史，window.history对象在编写程序时可不使用window这个前缀。为了保护用户的隐私，对JavaScript访问该对象的方法做出了限制。history对象及其属性和方法back()方法：加载历史列表中的前一个URL，这与在浏览器中单击“后退”按钮相同。forward()方法：加载历史列表中的下一个URL，这与在浏览器中单击“前进”按钮相同。06OPTIONnavigator对象提供了浏览器环境的信息，包括浏览器的版本号、运行的平台等信息。window.navigator对象包含访问者浏览器的有关信息，window.navigator对象在编写时可不使用window这个前缀。navigator对象07OPTION8.2jQuery的尺寸方法通过jQuery处理元素和浏览器窗口的尺寸很容易，jQuery提供了多个处理尺寸的重要方法，页面div元素的HTML代码如下所示。<divid="div1"style="height:100px;width:300px;padding:10px;margin:3px;border:1pxsolidblue;background-color:lightblue;"></div>尺寸方法名称示例代码代码对应的尺寸值width()$("#div1").width()300height()$("#div1").height()100innerWidth()$("#div1").innerWidth()320innerHeight()$("#div1").innerHeight()120outerWidth()$("#div1").outerWidth()322outerHeight()$("#div1").outerHeight()122outerWidth(true)$("#div1").outerWidth(true)328outerHeight(true)$("#div1").outerHeight(true)128目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效网页0803.html中包含可折叠与展开网页内容。单击“收起”超链接，如图1所示，折叠对应的网页内容。单击“展开”超链接，如图2所示，展开对应的网页内容。【任务描述】图1在网页0803.html中单击“收起”超链接图2在网页0803.html中单击“展开”超链接任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效为每一个name属性值为jHide的超链接设置触发onclick事件时调用的无名函数。通过设置网页元素的className属性隐藏与显示对应的网页元素，同时通过设置超链接的innerHTML属性，动态改变其文本内容。【思路探析】【特效实现】网页0803.html中折叠与展开网页内容特效主要应用的CSS代码如所示。序号程序代码010203040506.rankSB-cate.expAdldd{display:block;float:none;width:155px}.rankSB-cate.expA.dlA-hidedd{display:none}任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效网页0803.html中折叠与展开网页内容特效对应的HTML代码如表所示。序号程序代码010203040506070809101112131415161718192021222324<divclass="sidebar"><divclass="modbrandOutmb10rankSB-cate"><divclass="modbrand"><divclass="thA"><spanclass="mark">笔记本电脑排行榜</span></div><divclass="tbA"><divclass="expA"><dlclass="dlAclearfix"><dt><i>关注最高</i><aclass="btn"href="javascript://"name="jHide">收起</a></dt><dd><ahref="">热门笔记本电脑排行</a></dd><dd><ahref="">笔记本电脑品牌排行</a></dd><dd><ahref="">热门笔记本电脑系列排行</a></dd><dd><ahref="">上升最快笔记本电脑排行</a></dd></dl><dlclass="dlAclearfix"><dt><i>热门品牌</i><aclass="btn"href="javascript://"name="jHide">收起</a></dt><dd><ahref="">联想笔记本电脑排行</a></dd><dd><ahref="">华硕笔记本电脑排行</a></dd><dd><ahref="">戴尔笔记本电脑排行</a></dd></dl></div>任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效网页0803.html中实现折叠与展开网页内容特效的JavaScript代码如表所示。序号程序代码25262728</div></div></div></div>序号程序代码010203040506070809101112131415161718<script>(function(){varhides=document.getElementsByName("jHide");for(vari=0;i<hides.length;i++){hides[i].onclick=function(){varbox=this.parentNode.parentNode;if(box.className.indexOf("dlA-hide")<0){box.className+="dlA-hide";this.innerHTML="展开"}else{box.className=box.className.replace(/dlA-hide/,"");this.innerHTML="收起"}};};})();</script>目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性

设计网页内容折叠与展开特效网页0804.html中包含可折叠与展开网页内容。单击按钮，如图1所示，即可展开对应的网页内容。单击按钮，如图2所示，即可隐藏对应的网页内容。【任务描述】图1在网页0804.html中单击“+”按钮图2在网页0804.html中单击“-”按钮应用jQuery的addClass()方法为网页元素添加样式类，应用jQuery的removeClass()方法为网页元素移去样式类。应用replace()方法，将字符串中的空白字符替换为1个空格字符，应用split()方法，将字符串分割成字符串数组。应用JavaScript的className属性为网页元素设置样式类。【思路探析】任务8-4应用JavaScript的getElementsByTagName()方法和className属性

设计网页内容折叠与展开特效【特效实现】网页0804.html中折叠与展开网页内容特效主要应用的CSS代码如表所示。序号程序代码01020304050607080910111213141516171819.sort_boxli.m.icon{display:inline-block;vertical-align:middle;float:right;background:url(images/sort_box_bg.png)no-repeat-16px-134px;width:14px;height:14px;margin-top:6px;cursor:pointer;}.sort_box.hover.m.icon{background-position:0-134px;}.sort_box.m.add{background-position:0-118px!important;}.sort_box.m.minu{background-position:-16px-134px!important;}.sort_boxli.show{display:block;}.sort_boxli{position:relative;}.sort_boxlia:hover{text-decoration:underline!important;}.sort_boxli.linka:hover{text-decoration:none!important;}.sort_box.hover.m{cursor:pointer!important;}.sort_boxli.link{margin:0;}任务8-4应用JavaScript的getElementsByTagName()方法和className属性

设计网页内容折叠与展开特效网页0804.html中折叠与展开网页内容特效对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920212223<divclass="spacer"></div><divid=""class="con"name="4030"><divid=""class="colaside"name="4031"><divid="component_78140"></div><divclass="sort_box"name=""><h3align="center">童装童鞋</h3><ul><li><spanonclick="change(4009391,this)"class="m"name="C2"><spanclass="iconminu"></span></span><ahref=""class="t"title="套装">套装</a><divid="4009391"class="linkhide"name="C1"><span><ahref=""title="运动套装">运动套装</a></span><span><ahref=""title="内衣套装">内衣套装</a></span><span><ahref=""title="礼服套装">礼服套装</a></span><span><ahref=""title="其他">其他</a></span></div></li><li><spanclass="m"name="C2"><spanclass="iconadd"></span></span>任务8-4应用JavaScript的getElementsByTagName()方法和className属性

设计网页内容折叠与展开特效序号程序代码242526272829<ahref=""class="t"title="亲子装">亲子装</a></li></ul></div></div></div>网页0804.html中折叠与展开网页内容特效主要应用的CSS代码如表所示。序号程序代码0102030405060708091011<scripttype="text/javascript">$('.sort_boxli.m').hover(function(){$(this).parent().addClass('hover’);},function(){$(this).parent().removeClass('hover’);});functionchange(id,node){vard=document.getElementById(id);varchildNode=node.getElementsByTagName('span’);node=childNode[0];varc=node.className;序号程序代码1213141516171819202122c=c.replace(/\s+/ig,'‘);varcList=c.split('‘);if(cList[1]=='add’){node.className='iconminu’;d.className='linkhide’;}else{node.className='iconadd’;d.className='linkshow’;}}</script>目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效网页0805.html中包含可折叠与展开网页内容。单击“展开”超链接，如图1所示，展开隐藏的网页内容。此时单击“收起”超链接，如图2所示，会折叠部分网页内容。【任务描述】图1在网页0805.html中单击“展开”超链接图2在网页0805.html中单击“隐藏”超链接任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效应用offset()方法的top属性获取对应网页元素的纵向坐标，通过2个元素纵向坐标的差值计算高度。当商品品牌名称超过5行时，设置类样式名称为“allbrand”的网页元素高度为指定值，并且显示“展开”超链接，同时将该超链接的click事件与自定义函数togglebrand()进行绑定。自定义函数togglebrand()用于展开与折叠网页内容。【思路探析】【特效实现】网页0805.html中折叠与展开网页内容特效主要应用的CSS代码如表所示。序号程序代码0102030405060708091011.filtrate_box.list.height{overflow:hidden;height:18px;margin-bottom:4px;padding-bottom:0;}.filtrate_box.list.brand_height{overflow:hidden;height:24px;margin-bottom:4px;序号程序代码1213141516171819padding-bottom:0;}.filtrate_box.list.brand_opt.btn_b{background:url(images/arrow_t.png)no-repeat02px;}.filtrate_box.list.brand_opt.hover{background-position:0-20px;}任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效网页0805.html中折叠与展开网页内容特效主要应用的CSS代码如表所示。序号程序代码01020304050607080910111213141516171819202122232425<divclass="filtrate_box"name=""><divclass="head"><h3>商品筛选：</h3><divclass="opt_list"style=""><ul><liclass="all_sort"><spanclass="tt">童装童鞋</span></li></ul></div></div><dlclass="list"><dtclass=“brand_t”style=“”><b>品牌：</b><ahref=“#”class=“redall”>全</a></dt><ddclass="brand_optbrand_heightallbrand"style=""><span><aname="brand"class=""title="巴拉巴拉"href="#">巴拉巴拉</a></span><span><aname="brand"class=""title="笛莎"href="#">笛莎</a></span><span><aname="brand"class=""title="爱·制造"href="#">爱·制造</a></span><span><aname="brand"class=""title="安奈儿"href="#">安奈儿</a></span><span><aname="brand"class=""title="小猪班纳"href="#">小猪班纳</a></span><span><aname="brand"class=""title="马拉丁"href="#">马拉丁</a></span>……<span><aname="brand"class=""title="瓢虫之家"href="#">瓢虫之家</a></span><span><aname="brand"class=""title="belbaby"href="#">belbaby</a></span><spanclass="button"style="display:none;"id="tjbtn">展开</span></dd></dl></div>任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效网页0805.html中实现折叠与展开网页内容特效对应的JavaScript代码如表所示。序号程序代码0102030405060708091011121314151617181920212223242526<scripttype="text/javascript">varfilter_brand_height=64;$(function(){varbrand_top=$('.allbrand').offset().top;varbrand_bottom=$('.brand_bottom').offset().top;if(brand_bottom-brand_top<filter_brand_height){//全部品牌未超过5行$('.allbrand').removeClass('brand_height');}else{$(".allbrand").css("height",filter_brand_height);$('#tjbtn').show();$('#tjbtn').bind("click",togglebrand);}});functiontogglebrand(){if($('.allbrand').hasClass('brand_height')){$('.allbrand').css("height","");$('.allbrand').removeClass('brand_height’);$('#tjbtn').addClass("btn_b");$('#tjbtn').html('收起');}else{$('.allbrand').addClass('brand_height’);$('#tjbtn').removeClass("btn_b");$(".allbrand").css("height",filter_brand_height);$('#tjbtn').html('展开');}}</script>目录导航任务8-1应用jQuery的each()和hasClass()等方法设计网页内容折叠与展开特效任务8-3应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效任务8-5应用jQuery的bind()和css()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与展开特效任务8-2应用jQuery的toggle()和css()等方法实现网页内容多层折叠与展开特效任务8-4应用JavaScript的getElementsByTagName()方法和className属性设计

网页内容折叠与展开特效任务8-7应用DOM的getElementById()方法和className属性设计网页内容折叠与

展开特效任务8-8应用jQuery的hover和click事件设计网页内容折叠与展开特效任务8-9应用jQuery的data()和animate()等方法设计网页内容折叠与展开特效任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与

展开特效网页0806.html中折叠与展开网页内容特效的初始状态如图1所示，单击超链接则显示对应的网页内容，如图2所示。【任务描述】图1网页0806.html中折叠与展开网页内容特效的初始状态图2在网页0806.html中单击超链接显示对应的网页内容应用is()方法判断所单击的网页元素当前是否处于隐藏（:hidden）状态。应用slideUp()方法滑动隐藏被选元素，应用slideDown()方法滑动显示被选元素。应用toggleClass()方法从匹配的元素中添加或删除一个样式类。【思路探析】任务8-6应用jQuery的next()和toggleClass()等方法设计网页内容折叠与

展开特效【特效实现】网页0806.html中折叠与展开网页内容特效对应的HTML代码如表所示。序号程序代码0102030405060708091011121314151617181920<divclass="container"><h2class="acc_trigger"><ahref="#">WebDesign&Development</a></h2><divclass="acc_container"><divclass="block"><h3>NeedaWebsite?</h3></div></div><h2class="acc_trigger"><ahref="#">L