品牌列表的实现效果

对于某些电商网站上的品牌列表的展示效果，用户进入该页面时，品牌列表默认精简显示的，如下图1：
这里写图片描述
单击“显示全部品牌”的按钮时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”(当然根据业务需求，也可以有其他需求),如下图所示2：

当再次点击“精简显示品牌”时，又回到图1

以下内容就这个例子，我们进行详细讲解，主要是分析问题的思路

设计实现它的HTML结构，HTML代码如下：

    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30339)</i></li>
            <li><a href="#">索尼</a><i>(12455)</i></li>
            <li><a href="#">三星</a><i>(98732)</i></li>
            <li><a href="#">尼康</a><i>(10339)</i></li>
            <li><a href="#">松下</a><i>(29239)</i></li>
            <li><a href="#">卡西欧</a><i>(8639)</i></li>
            <li><a href="#">富士</a><i>(14339)</i></li>
            <li><a href="#">柯达</a><i>(9500)</i></li>
            <li><a href="#">宾得</a><i>(2197)</i></li>
            <li><a href="#">理光</a><i>(4114)</i></li>
            <li><a href="#">奥林巴斯</a><i>(12339)</i></li>
            <li><a href="#">明基</a><i>(1939)</i></li>
            <li><a href="#">爱国者</a><i>(3039)</i></li>
            <li><a href="#">其他品牌相机</a><i>(80339)</i></li>
        </ul>

        <div class="showmore">
            <a href="#"><span>显示全部品牌</span></a>
        </div>
    </div>

为上边的HTML代码添加CSS样式

        ul,li{
            margin: 0;
            padding: 0;
        }
        .SubCategoryBox{
            width: 570px;
        }
        .SubCategoryBox ul li {
            display: inline-block;
            width: 32%;
            text-align: center;
            margin-top: 5px;
        }

        .SubCategoryBox ul li a{
            text-decoration: none;
        }

        .SubCategoryBox .showmore{
            margin-top: 20px;
            text-align: center;

        }

        .SubCategoryBox .showmore a{
            text-decoration: none;
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 3px;
        }

        .promoted{
            color: antiquewhite;
        }

接下来为这个页面添加一些交互效果，要做的工作有以下几项：
（1）从第7条开始隐藏后面的品牌（最后一条“其他品牌相机”除外）
（2）当用户单击“显示全部品牌”按钮时，将执行以下操作
       1. 显示隐藏的品牌
       2. “显示全部品牌”按钮文本切换成“精简显示品牌”
       3. 高亮推荐品牌
（3）当用户单击“精简显示品牌”按钮时，将执行以下操作
       1. 从第7条开始隐藏后面的品牌（最后一条“其他品牌相机”除外）
       2. “精简显示品牌”按钮文本切换成“显示全部品牌”
       3. 去掉高亮显示的推荐品牌
（4）循环进行第（2）步和第（3）步。

下面我们逐步完成以上的效果

（1）从第7条开始隐藏后面的品牌（最后一条“其他品牌相机”除外）

            var $category = $("ul li:gt(5):not(:last)");
            $category.hide();

（2）当用户单击“显示全部品牌”按钮时，将执行以下操作

首先获取到按钮，代码如下：

var toggleBtn = $("div.showmore > a");

然后给按钮添加事件，使用show()方法把隐藏的品牌列表显示出来，代码如下;

 toggleBtn.click(function () {
         $category.show();
}

之后，需要将“全部品牌”按钮转换成“精简显示品牌”，代码如下：

$(this).find("span").css("background","blue").text("精简显示品牌").css("color","#fff");

接下来需要高亮推荐品牌，代码如下：

$("ul li").filter(":contains('佳能'),:contains('奥林巴斯'),:contains('三星')").addClass("promoted").find("a").addClass("promoted");

（3）.当用户单击“精简显示品牌”按钮时，将执行以下操作（这部分代码和第三部分正好相反，就不一一分析了）

由于用户点击的是单一按钮，因此事件任然是刚才的按钮元素。要切换两种状态如果在一个按钮上进行，可以通过判断元素的显示或者隐藏来达到目的。代码结构结构：

 if (元素显示){
    //元素隐藏 
  } else {
    //元素显示
  }

如何判断元素是否显示来分别执行代码，如下：

if ($category.is(":visible")){}

最后，完整版的JS代码：

$(function () {
            var $category = $("ul li:gt(5):not(:last)");
            $category.hide();

            var toggleBtn = $("div.showmore > a");

            toggleBtn.click(function () {
                if ($category.is(":visible")){
                    $category.hide();
                    $(this).find("span").css("background","#fff").text("显示全部品牌").css("color","#000");
                    $("ul li").filter(":contains('佳能'),:contains('奥林巴斯'),:contains('三星')").
                    removeClass("promoted").find("a").removeClass("promoted");

                } else {
                    $category.show();
                    $(this).find("span").css("background","blue").text("精简显示品牌").css("color","#fff");
                    $("ul li").filter(":contains('佳能'),:contains('奥林巴斯'),:contains('三星')").
                    addClass("promoted").find("a").addClass("promoted");

                }
            })
        })

品牌列表的实现效果

猜你喜欢