JQuery - 第一课某网站品牌列表精简/全部显示效果的实现

最新推荐文章于 2022-05-16 22:30:01 发布

yuanliangbeyondd

最新推荐文章于 2022-05-16 22:30:01 发布

阅读量707

点赞数 1

分类专栏： JQuery训练文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yuanliangbeyond/article/details/84121204

版权

JQuery训练专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery - 第一课某网站品牌列表精简/全部显示效果的实现

品牌列表，实现全部显示/精简显示的切换。

注意点：

1.思考诸如类似js/ajax的实现的思路，思考路线（思考ajax扩展）。

2.理解javascript基于事件模型的特点

3.理解Jquery常见函数能简化代码的优点

初始，精简显示

单击按钮，全部显示，并高亮显示推荐品牌

实现：

1.设计静态HTML样式及内容

<body>
  	<div class="SubCategoryBox">
  		<ul>
  			<li><a href="#">佳能</a><i>（2000）</i></li>
  			<li><a href="#">索尼</a><i>（2000）</i></li>
  			<li><a href="#">三星</a><i>（2000）</i></li>
  			<li><a href="#">尼康</a><i>（2000）</i></li>
  			<li><a href="#">松下</a><i>（2000）</i></li>
  			<li><a href="#">卡西欧</a><i>（2000）</i></li>
  			<li><a href="#">佳能2</a><i>（2000）</i></li>
  			<li><a href="#">佳能3</a><i>（2000）</i></li>
  			<li><a href="#">佳能4</a><i>（2000）</i></li>
  			<li><a href="#">佳能5</a><i>（2000）</i></li>
  			<li><a href="#">佳能5</a><i>（2000）</i></li>
  			<li><a href="#">佳能6</a><i>（2000）</i></li>
  			<li><a href="#">佳能7</a><i>（2000）</i></li>
  			<li><a href="#">佳能8</a><i>（2000）</i></li>
  			<li><a href="#">佳能9</a><i>（2000）</i></li>
  			<li><a href="#">其他</a><i>（2000）</i></li>
  		</ul>
  		<div class="showMore">
  			<a href="#"><span>显示全部</span></a>
  		</div>
  	</div>
  </body>

                *{ 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;background:#FFF000; border:solid 3px green;
		}
		.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;}

2.逐步分解，分叉交互过程及图文变化

$(document).ready(function(){
	var $category = $('ul li:gt(5):not(:last)');
	$category.hide();
	var $toggleBtn = $('div.showMore > a');

	$toggleBtn.toggle(function(){
		$category.show();
			$('.showMore a span').css("background", "url(images/up.gif) no-repeat 0 0").text("精简显示");
			$('ul li').filter(":contains('索尼'),:contains('其他')").addClass("promoted");
		
		},function(){
			$category.hide();
		$('.showMore a span').css("background", "url(images/down.gif) no-repeat 0 0").text("显示全部");
		$('ul li').removeClass("promoted");
						
	});
		
})

yuanliangbeyondd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery - 第一课某网站品牌列表精简/全部显示效果的实现

JQuery - 第一课某网站品牌列表精简/全部显示效果的实现品牌列表，实现全部显示/精简显示的切换。注意点：1.思考诸如类似js/ajax的实现的思路，思考路线（思考ajax扩展）。2.理解javascript基于事件模型的特点3.理解Jquery常见函数能简化代码的优点初始，精简显示单击按钮，全部显示，并高亮显示推荐品牌...
复制链接

扫一扫