2009.12.17(4)——jquery例子全部显示与精简显示-CSDN博客

本文链接：https://blog.csdn.net/cody123/article/details/83518754

2009.12.17(4)——jquery例子全部显示与精简显示
我希望的效果是，10个东西我先显示6个，然后点击“全部显示”就把10个东西全部显示，这时，“全部显

示”按钮变为“精简显示”，再点击，就又会显示6个，如此反复
先看html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数码相机</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; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</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="more.html"><span>全部显示品牌</span></a>

	</div>
</div>
</body>
</html>

1.首先，隐藏一些li，比如说7个以后都隐藏，但是最后一个“其他相机”是不能隐藏的

var $hide = $('ul li:gt(5):not(:last)');
$hide.hide();

2.点击“全部显示”显示所有的

var $show = $('div.showmore > a');
$show.click(function(){
	$hide.show();
});

3.把“全部显示”改为“精简显示”

$('.showmore a span').text("精简显示");

4.然后可以加点效果，比如说高亮显示一些品牌

$('ul li').filter(".contains('佳能')",":contains('爱国者')").addClass("promoted");

5.有个问题，大家会发现，因为那个“全部显示”是一个超链接，就会跳转到其他页面，所以，我们要给浏

览器返回一个false,这五步代码如下

$(function(){
		var $hide = $('ul li:gt(7):not(:last)');
		$hide.hide();//隐藏
		var $show = $('div.showmore > a');
		$show.click(function(){
			$hide.show();//显示
			//改变提示内容
			$('.showmore a span').css("background","url(images/up.gif)no-repeat 0 

0").text("精简显示品牌");
			//高亮显示
			$('ul li').filter(":contains('佳能'),:contains('柯达'),:contains('爱国

者')").addClass("promoted");
			return false;//return false让浏览器认为用户没有单击该链接
		});
	})

6.然后，应该是单机“精简显示”，只显示一部分，但是，有个问题我们点击的是同一个链接，这如何来区

分呢？我们可以根据是hide还是show来区分

if($hide.is(":visible")){}else{}//判断是否显示

jquery的全部代码如下：

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(function(){
		var $hide = $('ul li:gt(7):not(:last)');
		$hide.hide();//隐藏
		var $show = $('div.showmore > a');
		$show.click(function(){
			if($hide.is(":visible")){
				$hide.hide();
				$('.showmore a span').css("background","url(images/down.gif)no

-repeat 0 0").text("全部显示品牌");
				//不高亮显示
				$('ul li').removeClass("promoted");
			}else{
				$hide.show();//显示
				//改变提示内容
				$('.showmore a span').css("background","url(images/up.gif)no-

repeat 0 0").text("精简显示品牌");
				//高亮显示
				$('ul li').filter(":contains('佳能'),:contains('柯

达'),:contains('爱国者')").addClass("promoted");
			}

			return false;//return false让浏览器认为用户没有单击该链接
		});
	})

</script>