jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能_菜单导航

jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能: 发布时间：2020-03-17编辑：脚本学堂

jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能，很实用的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <title><a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>产品品牌隐藏与显示，仿淘宝网</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    body {font-size:12px;text-align:center;}
    a { color:#04D; text-decoration:none;}
    a:hover { color:#F50; text-decoration:underline;}
    .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
    .SubCategoryBox ul { list-style:none;}
    .SubCategoryBox ul li { display:block; float:left; width:200px; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:20px;}
    .showmore { clear:both; text-align:center;padding-top:10px;}
    .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
    .showmore a span { padding-left:15px; background:url(/source/images/201207/tp714_down.gif) no-repeat 0 0;}
    .promoted a { color:#F50;}
    </style>
    
    <script src="/source/js/jquery1.3.2.js" type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>"></script>
    <script type="text/javascript">
$(function(){    //  等待DOM加载完毕.
		var $category = $('ul li:gt(5):not(:last)');     //  获得索引值大于5的品牌集合对象(除最后一条)	
		$category.hide();							    //  隐藏上面获取到的jQuery对象。
		var $toggleBtn = $('div.showmore > a');         //  获取“显示全部品牌”按钮
		$toggleBtn.click(function(){
		      if($category.is(":visible")){
				$category.hide();            //  隐藏$category
				$('.showmore a span')
				.css("background","url(/jscss/demoimg/201206/down.gif) no-repeat 0 0")      
					.text("显示全部品牌");   //改变背景图片和文本
					$('ul li').removeClass("promoted");			// 去掉高亮样式
			  }else{
					$category.show();            //  显示$category
					$('.showmore a span')
						.css("background","url(/jscss/demoimg/201206/up.gif) no-repeat 0 0")      
						.text("精简显示品牌");      //改变背景图片和文本
					$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
				.addClass("promoted");	//添加高亮样式
			  }
			return false;	//<a href=http://www.jb200.com/zt/chaolianjie/ target=_blank class=infotextkey>超链接</a>不跳转
		})
})
</script>
    </head>
    <body>
    <div class="SubCategoryBox">
    <ul>
    <li ><a href="#" _fcksavedurl="#">佳能</a><i>(30440) </i></li>
    <li ><a href="#" _fcksavedurl="#">索尼</a><i>(27220) </i></li>
    <li ><a href="#" _fcksavedurl="#">三星</a><i>(20808) </i></li>
    <li ><a href="#" _fcksavedurl="#">尼康</a><i>(17821) </i></li>
    <li ><a href="#" _fcksavedurl="#">松下</a><i>(12289) </i></li>
    <li ><a href="#" _fcksavedurl="#">卡西欧</a><i>(8242) </i></li>
    <li ><a href="#" _fcksavedurl="#">富士</a><i>(14894) </i></li>
    <li ><a href="#" _fcksavedurl="#">柯达</a><i>(9520) </i></li>
    <li ><a href="#" _fcksavedurl="#">宾得</a><i>(2195) </i></li>
    <li ><a href="#" _fcksavedurl="#">理光</a><i>(4114) </i></li>
    <li ><a href="#" _fcksavedurl="#">奥林巴斯</a><i>(12205) </i></li>
    <li ><a href="#" _fcksavedurl="#">明基</a><i>(1466) </i></li>
    <li ><a href="#" _fcksavedurl="#">爱国者</a><i>(3091) </i></li>
    <li ><a href="#" _fcksavedurl="#">其它品牌相机</a><i>(7275) </i></li>
    </ul>
    <div class="showmore">
    <a href="#" _fcksavedurl="#"><span>显示全部品牌</span></a>
    </div>
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：黑色风格的CSS菜单，带阴影和小箭头效果
下一篇：JS+CSS技术实现的Select控件效果

与 jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能有关的文章

本文标题：jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能
本页链接：http://www.jb200.com/tx/77.html

浏览排行

栏目分类

热点文章

jQuery产品品牌隐藏与显示，仿淘宝网商品列表的品牌显示与折叠功能