3. Comprehensive exercise: brand display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</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">
---------------------------在此完成功能---------------------------
</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">
<span>显示全部品牌</span>
</a>
</div>
</div>
</body>
</html>
The initial interface is as follows:
Need to improve the function:
- At the beginning, all the brands were not fully displayed. It is required to display only the first two rows. ClickShow all brandsThen it can be fully displayed.
- After all the brands are displayed, the words should becomeShow lean brand, After clicking at the same time, only the first two rows will be displayed
- Note the picture next to the text, asShow all brandsWhen, the corner of the picture is downward; when it isShow lean brand, The corner of the picture is upward.
In style.showmore a span and style.showless a span - After displaying all the brands, highlight the Samsung label. After displaying the simplified brand, cancel the highlighting of the Samsung label.
In the .promoted a style
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var $lisObj=$("li:gt(5):not(:last)");
var $aObjs=$("div > div > a");
一、初始状态，仅显示前两行和最后一个的 其它品牌相机 ,最后一个li标签的下标为5
$lisObj.hide();
二、给 显示全部品牌/显示精简品牌 绑定单击事件
$aObjs.click(function () {
// 让某些品牌，显示，或隐藏
$lisObj.toggle();
//如果品牌是隐藏的，需要改标签为显示全部品牌；如果品牌是显示的，需要改标签为显示精简品牌；
//同时修改对应的图片
if ($lisObj.is(":hidden")) {
// 品牌隐藏 ：1 显示全部品牌
$aObjs.find("span").text("显示全部品牌");
//2.角标向下 showmore
$("div > div").removeClass("showless"); //虽然是类样式，但是不能写成.showless，不能加点
$("div > div").addClass("showmore");
//3.去掉三星的高亮
$("li:contains('三星')").removeClass("promoted");
} else {
$aObjs.find("span").text("显示精简品牌");
$("div > div").removeClass("showmore");
$("div > div").addClass("showless");
//给三星加高亮
$("li:contains('三星')").addClass("promoted");
}
return false;
});
});
</script>