使用jQuery实现展示列表的全展示与精简展示(包含文字加亮的实现)

使用jQuery实现展示列表的全展示与精简展示

- - 实现效果
  - 代码

实现效果

（1）列表的全部展示（此时，可以对部分强调内容实现加亮）
在这里插入图片描述
（2）列表的精简展示（实现对于部分列表内容的展示）

代码

<!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>品牌展示练习</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 , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {

		//基本的初始状态
	    $("li:gt(5):not(:last)").hide();//让下标大于5，且不包含最后一个的，无序列表的列表项，隐藏

		/*
		显示的按钮实际上并不是按钮，而是一个div+超链接
		很多效果，是通过css样式做出来的
		==>把点击，放在 a 标签上边的可以了
		a标签怎么查？直接通过标签名来查吗？？
		---->不行的，因为整体有很多 a标签
		所以，应该通过：div下的div下的a，来进行查找
		------
		或者是：最后一个a标签
		 */
		//给功能按钮绑定单击事件
		$("div div a").click(function () {
			//让某些品牌，显示或者因此
            $("li:gt(5):not(:last)").toggle();

            /*
            * 一、按钮上的文本有两种情况：
            * 1、显示全部品牌：脚标向下----品牌隐藏的状态
            * 2、显示精简品牌：脚标向上----品牌没有隐藏的状态
            * 二、加高亮的问题（在全部显示的状态下加上高亮）
            * 也是通过设置 li 标签的class属性值来实现的
            */
            //判断现在的状态，是不是隐藏
			if($("li:gt(5):not(:last)").is(":hidden")){
				//是隐藏了
				$("div div a span").text("显示全部品牌");
				//先删掉原来的class属性
				$("div div").removeClass();
				//再添加上需要使用的class属性
				$("div div").addClass("showmore");

				//去掉高亮
				$("li:contains('索尼')").removeClass();

            }else {
			    //没有隐藏
				$("div div a span").text("显示精简品牌");
                //先删掉原来的class属性
                $("div div").removeClass();
                //再添加上需要使用的class属性
				$("div div").addClass("showless");

				//加高亮
				$("li:contains('索尼')").addClass("promoted");

			}


			return false;//a标签，不按照超链接规定的地址跳转，需要在它的单击事件末尾加上这句话才可以
        });


	});
</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="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

行百里者，半九十！

原文链接：https://blog.csdn.net/qq_47888755/article/details/119762982