jQuery(七)——综合练习：品牌展示

最新推荐文章于 2022-09-13 08:40:48 发布

种下一颗草莓

最新推荐文章于 2022-09-13 08:40:48 发布

阅读量441

点赞数

分类专栏： # jQuery 文章标签： html css js

本文链接：https://blog.csdn.net/HangHug_L/article/details/113516934

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

3. 综合练习：品牌展示

<!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>

初始界面如下:

需要完善的功能：

刚开始时所有的品牌不完全展示出来，要求仅显示前两行，点击显示全部品牌后才能完全显示出来。
品牌全部显示出来后，字样应该变成显示精简品牌，同时点击后，只显示前两行
注意到文字旁边的图片，当为显示全部品牌时，图片的角标向下；当为显示精简品牌，图片的角标向上。
在样式.showmore a span 和样式 .showless a span 中
在显示全部品牌后，给三星标签加高亮，在显示精简品牌后，取消三星标签的高亮。
在.promoted a 样式中

<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>