13.选择器案例：动态效果列表

程序员文章站 2022-07-15 14:14:47
...
<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>动态列表效果.html</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; 
				line-height: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;
				}
			.promoted a { 
				color:#F50;
				}
		</style>
		<!-- 引入jQuery -->
		<script src="./js/jquery-1.8.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var $hOrSh=$("li:gt(4):not(:last)");
				$hOrSh.hide();
				
				//判断
				$("a:has(span)").click(function(){
					if($hOrSh.is(":hidden")){
						//若$hOrSh是隐藏的，显示，则把提示"显示全部品牌"变成隐藏部分
						$hOrSh.show();
						$("span").html("隐藏部分品牌");
					}else{
						//反之,若$hOrSh是显示的，则把提示变成"显示全部品牌"
						$hOrSh.hide();
						$("span").html("显示全部品牌");
					}
				});
			});
		</script>
	</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li ><a href="#">佳能</a><i>(30440) </i></li>
			<li ><a href="#">索尼</a><i>(27220) </i></li>
			<li ><a href="#">三星</a><i>(20808) </i></li>
			<li ><a href="#">尼康</a><i>(17821) </i></li>
			<li ><a href="#">松下</a><i>(12289) </i></li>
			
			<li ><a href="#">卡西欧</a><i>(8242) </i></li>
			<li ><a href="#">富士</a><i>(14894) </i></li>
			<li ><a href="#">柯达</a><i>(9520) </i></li>
			<li ><a href="#">宾得</a><i>(2195) </i></li>
			<li ><a href="#">理光</a><i>(4114) </i></li>
			<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li ><a href="#">明基</a><i>(1466) </i></li>
			<li ><a href="#">爱国者</a><i>(3091) </i></li>
			<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="javascript:void(0)"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>
上一篇： 13.
下一篇：第一次创业失败的总结 - 产品设计