jQuery(七)——綜合練習：品牌展示

阿新 • • 發佈：2021-02-16

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>