jQuery实战之品牌展示列表效果

只是初始状态；

这是点击后效果。首相分析下需求：1,首先在页面中创建导航，单击标题的时候，隐藏内容，同时小图标也改变。2,单击更多的时候，显示隐藏的链接内容，并将'更多'变成'简化，改变小图标，并高亮部分链接。下面是完整代码：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=GB-2312 ' title text/title script type=' text/JavaScript ' src=' http : jquery-1。4 .2 .js '/脚本样式类型=' text/CSS ' * { margin :0；划水：0;}正文{ font-size :13 px} #包装器{边框：1 px实心# CCC宽度宽度：301px飞越：隐藏；} #包装器.Head{背景；# eeepadding :8 pxh warth :18 pxcursor :指针指针；} #包装器.头部h3 { float:left} #包装器.头部跨度{ float : right margin-top :3 px；} #包装器.内容{ padding:8px } # wraper .内容ul {列表式：无；列表样式-:型无；} #包装器.内容ul li { float:left宽度：95 px高度：23px线高：23 px} #包装器.bot { float : right padding-top :5 px；填充-底部：5 px} .GetFocus { background: # eee}。一个{ color : # ff 8000 }/样式脚本类型=' text/JavaScript ' $(function(){//页面加载事件$('.head ').单击(函数(){//图片单击事件if($(').内容')。是(' :可见'){//如果内容可见$('.头部跨度img ').attr('src '，' Images/a1。gif ')；//改变图片//隐藏内容$('.内容')。hide()；}else{ $(' .头部跨度img ').attr('src '，' Images/a2。gif ')；//改变图片$('.内容')。show()；} });var $李察=$('。bot a '；var $ prompt=$(' ul Li : gt(4): not(: last)')$ prompt。hide()；$($李察)。单击(函数(){//热点链接单击事件//如果内容为简化if($chaLi.text()=='更多'){ //隐藏大于四且不是最后一项的所有内容$('.Bot img ').attr('src '，' Images/a7.gif') $prompt.show().添加类(' GetFocus ')；$('ul li ').筛选器(“:contains(”青年)，contains('老人)，contains('少年')').addClass(' one ')$($李察)。文本('简化');}else{ $prompt.hide() $(' .Bot img ').attr('src '，' Images/a6。gif ')$($李察)。文本('更多');} })}))/脚本/头体H3图书分类/H3 span mg src=' http : IMages/a2。gif ' alt=' '//span/div class=' Content ' ul lia href=' # '小说/ai(1000)/i/li lia href='# '文艺/ai(1000)/i/li lia href='# '知音/ai(1000)/i/li lia href='# '少儿/ai(1000)/i/li lia href='# '生活/ai(1000)/i/li lia href='# '社科/ai(1000)/i/li lia href='# '广利/ai(1000)/i/li lia href='# '美女/ai(1000)/i/li lia href='# '儿童/ai(1000)/i/li lia href='# '老人/ai(1000)/i/li lia href='# '少年/ai(1000)/i/li lia href='# '青年/ai(1000)/i/li lia href='# '成年/ai(1000)/i/li lia href='# '女人/ai(1000)/i/li lia href='# '父亲/ai(1000)/i/li lia href='# '木青/ai(1000)/i/li lia href='# '母亲/ai(1000)/i/li lia href='# '妹妹/ai(1000)/i/li lia href='# '其他/ai(1000)/I/Li/ul/div class=' Bot ' a href=' # '更多/a img src=' http : IMages/a 6。gif '/div/div/body/html