jQuery——商品显示与隐藏案例-CFANZ编程社区

先给大家看一下效果图，主要用了jQuery的知识

选择器：

：hidden 获取所有隐藏元素 $（"li:hidden"）

：visble 获取所有可见元素 $（"li:visble"）

: text 选取页面中所有文本框

body部分代码

<body>
		<div class="content">
			<div id="img">
				<img src="../images/xiangji.jpg" class="i">
			</div>
			<div class="part">
				&nbsp;&nbsp;&nbsp;<span style="color:wheat; font-weight:bolder; font-size: 30px;">商品筛选:</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;<span style="color: orange;font-size: 30px;">热卖相机</span>
			</div>
			<div class="part2">
			<ul>
				<li><a href="" style="">佳能</a></li><!-- //浮动 25% -->
				<li><a href="">索尼</a></li>
				<li><a href="">三星</a></li>
				<li><a href="" style="">尼康</a></li>
				<li><a href="">松下</a></li>
				<li><a href="">卡西欧</a></li>
				<li><a href="">富士</a></li>
				<li><a href="">柯达</a></li>
				<li><a href="">宾得</a></li>
				<li><a href="">理光</a></li>
				<li><a href="">阿里巴</a></li>
				<li><a href="" style="">宾得</a></li>
				<li><a href="">理光</a></li>
				<li><a href="">宾得</a></li>
				<li><a href="">柯达</a></li>
				<li><a href="">宾得</a></li>
				<li><a href="">理光</a></li>
				<li><a href="">阿里巴</a></li>
				<li><a href="" style="">索尼</a></li>
				<li class=""><a href="">三星</a></li>	
				<div class="part3">
					<button type="button"  id="btn">&nbsp;显示全部商品</button>
				</div>
			</ul>
		</div>
		</div>
	</body>

jquery代码

<script type="text/javascript">
		$(function(){
			
			var lie=$("ul>li:gt(5):not('ul>li:last')");
		    var text=$("ul>li>a:contains('佳能'),ul>li>a:contains('三星'),ul>li>a:contains('尼康')")
			lie.hide();
			$("#btn").click(function(){							
				if(lie.is(":hidden")){
						lie.show();
						$(this).nextAll("#btn").text("");
						text.css("color","orange")
						$("#btn").css("backgroundImage","url(../images/up.gif)" ).text("显示部分商品")
						return false;
					}else{
						lie.hide();
						text.css("color","blue")
						$("#btn").css("backgroundImage","url(../images/down.gif)").text("显示全部商品")
						return false;
					}		
			})
			
		})
	</script>

css样式设置

*{
			margin: 0;
			padding: 0;
		}
		#img{
			width: 50%;
			height: 700px;
			margin: 0 auto;
			border: 1px solid red;		
		}
		.part{
			width: 50%;
			height: 50px;
			margin: 30px auto;
			background-color: grey;
		}
		.part2{
			width: 50%;
			height: 300px;
			margin: 30px auto;
		}
		
		.part2 ul>li{
			list-style: none;
			float: left;
			width: 25%;
			margin-top:5px ;
			font-size: 25px;
			text-align: center;
			margin-top: 3%;
		}
		.part2 ul>li>a{
			font-size: 25px;
			text-decoration: none;
		}
		.i{
			width: 100%;
			height: 700px;	
		}	
		#btn{
			width: 180px;
			height: 50px;
			font-size: 20px;
			margin-left: 45%;
			margin-top: 5%;
			background-repeat:no-repeat ;
			background-image: url(../images/down.gif);
			background-size: 20px;
			background-position: 5px;
			
		}

这个案例感觉在肯多地方都会用到，有不足的地方希望大家指正！