欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>