jquery实现网页中常见的展示列表效果

最新推荐文章于 2022-11-15 20:22:14 发布

啊哈前端

最新推荐文章于 2022-11-15 20:22:14 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/wuzhe128520/article/details/49723005

jquery 专栏收录该内容

22 篇文章

订阅专栏

这篇博客展示了如何使用jQuery实现一个品牌列表的显示和隐藏功能。通过CSS样式设置列表布局，并通过JavaScript控制超过一定数量的品牌列表项在点击按钮后显示或隐藏。当点击"显示全部品牌"时，会高亮显示特定品牌如佳能、尼康和奥斯巴林。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery品牌列表效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	body {
		font: 16px/20px "Microsoft yahei,'微软雅黑'"
		color: #fff;
	}
	ul {
		list-style-type:none;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	ul li {
		float: left;
		text-align: right;
	}
	.clear:before,.clear:after {
		content: "";
		clear: both;
		display: table;
		height: 0;
		overflow: hidden;
		zoom: 1;
	}
	.SubCategoryBox {
		width: 473px;
		margin: 0 auto;
		border: 1px solid;
	}
	.SubCategoryBox ul{
		padding: 5px 10px;
	}
	.SubCategoryBox ul li {
		padding: 5px;
	}
	.SubCategoryBox ul li:nth-child(3n-2) {
		width: 130px;
	}
	.SubCategoryBox ul li:nth-child(3n-1) {
		width: 161px;
		margin-right: 30px;
		
	}
	.SubCategoryBox ul li:nth-child(3n) {
		width: 130px;
	}
	.showmore {
		text-align: center;
	}
	.showmore a {
		background: #eef;
		color: #CFCFE0;
	}
   
	.hightlight a,.hightlight i {
		color: red;
		/* font-weight: bold; */
	}
</style>
</head>
<body>
		<div class="SubCategoryBox">
			<ul class="clear" id="bancon">
				<li><a href="javascript:">佳能</a><i>(30441)</i></li>
				<li><a href="javascript:">索尼</a><i>(30442)</i></li>
				<li><a href="javascript:">三星</a><i>(30443)</i></li>
				<li><a href="javascript:">尼康</a><i>(30444)</i></li>
				<li><a href="javascript:">松下</a><i>(30445)</i></li>
				<li><a href="javascript:">卡西欧</a><i>(30446)</i></li>
				<li><a href="javascript:">富士</a><i>(30447)</i></li>
				<li><a href="javascript:">柯达</a><i>(30448)</i></li>
				<li><a href="javascript:">宾得</a><i>(30449)</i></li>
				<li><a href="javascript:">理光</a><i>(30450)</i></li>
				<li><a href="javascript:">奥斯巴林</a><i>(30451)</i></li>
				<li><a href="javascript:">明基</a><i>(30452)</i></li>
				<li><a href="javascript:">爱国者</a><i>(30453)</i></li>
				<li><a href="javascript:">其他品牌相机</a><i>(30454)</i></li>
			</ul>
			<div class="showmore" id="showpp">
			<a href=""><span>显示全部品牌</span></a>
			</div>
		</div>
     <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
     <script>
     $(function(){
     	var $target=$("#bancon li:gt(5):not(:last)");
     	$target.hide();
     	var $toggleBtn=$("#showpp a");
     	$toggleBtn.click(function(){
     		if($target.is(":visible")){
     		$target.hide();
     		$(this).find("span").text("显示所有品牌");
     		$("ul li").removeClass('hightlight')
     		}
     		else {
     			$target.show();
     			$(this).find('span').text("精简显示品牌");
     			$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥斯巴林')").addClass('hightlight')
     		}
     		return false;   /*阻止a标签的跳转*/
     	});
     	
     });

     </script>
</body>
</html>