jQuery仿淘宝网产品品牌隐藏与显示效果

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果。分享给大家供大家参考。具体如下：

这里演示jQuery实现产品品牌隐藏与显示效果，仿淘宝网商品列表的品牌显示与折叠功能，很实用的代码，看了就知道了。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-f-淘宝-产品-隐藏-显示-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery产品品牌隐藏与显示，仿淘宝网/title style type=' text/CSS ' * { margin :0；划水：0;}正文{ font-size :12 px文本对齐：居中；} a { color: # 04D文本装饰：无；} a:hover { color: # F50文本修饰：下划线；}.SubCategoryBox { width :600 px；margin:0汽车文本对齐：居中；页边距-顶部：40像素；}.SubCategoryBox ul { list-style : none；}.SubCategoryBox ul Li {显示块：float:left宽度宽度：200像素线高：20 px}.showmore { clear:both双双文本对齐：居中；填充-top :10 px；}.显示更多{ display:block宽度宽度：120pxmargin:0自动线高：24 pxborder:1px实心# AAA}。显示更多跨度{ padding-left :15 px；背景： URL(图像/向下。gif)不重复0 0；}.推广了一款{ color: # F50}/style！-引入jQuery-脚本src=' http : jQuery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){//等待数字正射影像图加载完毕var $ category=$(' ul Li : gt(5): not(: last)')；//获得索引值大于5的品牌集合对象（除最后一条)$类别。hide()；//隐藏上面获取到的jQuery对象var $ ToggleBtn=$(' div。多展示一个’)；//获取"显示全部品牌"按钮$ togglebtn。单击(function(){ if($ category。是(' :可见'){ $ category。hide()；//隐藏$category $(' .显示更大的跨度)。css(“”背景“，”网址(图像/向下。gif)不重复0 0’).文本('显示全部品牌');//改变背景图片和文本$('ul li ').removeClass(“”提升');//去掉高亮样式} else { $ category。show()；//显示$category $(' .显示更大的跨度)。css(“”背景“，url(images/up.gif) no-repeat 0 0”).文本('精简显示品牌');//改变背景图片和文本$('ul li ').筛选器(“:contains(”佳能)，contains('尼康)，contains('奥林巴斯')') .addClass(')提升');//添加高亮样式}返回false//超链接不跳转})})))/script/head dydiv class=' SubCategoryBox ' ulli a href=' # '佳能/ai(30440) /i/lili a href='# '索尼/ai(27220) /i/lili a href='# '三星/ai(20808) /i/lili a href='# '尼康/ai(17821) /i/lili a href='# '松下/ai(12289) /i/lili a href='# '卡西欧/ai(8242) /i/lili a href='# '富士/ai(14894) /i/lili a href='# '柯达/ai(9520) /i/lili a href='# '宾得/ai(2195) /i/lili a href='# '理光/ai(4114) /i/lili a href='# '奥林巴斯/ai(12205) /i/lili a href='# '明基/ai(1466) /i/lili a href='# '爱国者/ai(3091) /i/lili a href='# '其它品牌相机/ai(7275)/I/Li/uldiv class=' show more ' a href=' # ' span显示全部品牌/span/a/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。