【锋利的jQuery】4、案例研究——某网站品牌列表的效果 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>案例研究——某网站品牌列表的效果</title>
    <!-- 在head中引入jQuery -->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <link type="text/css" rel="stylesheet" href="../../../css/jQuery/demo/ch02/default.css" />

    <script type="application/javascript">

        $(function(){   //等dom加载完毕
            //获取第7条以及以后的（最后“其它品牌相机”除外）
            //：gt 表示选取索引大于index的元素
            //:not(选择器)  取出所有与给定选择器匹配的元素
            //:last 选取最后一个元素
            var $category = $("ul li:gt(5):not(:last)");
            $category.hide();
        })

        $(function(){
            //  获取“显示全部品牌”按钮
            // > 表示选取旗下所有子元素
            //显示所有被屏蔽的
            var $hideEnum = $("ul li:gt(5):not(:last)");
            var $showAll = $('div.showmore > a');
            $showAll.click(function(){
                if($hideEnum.is(":visible"))
                {
                    $hideEnum.hide();
                    $(this).find('span')
                            .css("background","url(../../../images/jQuery/ch02/down.gif) no-repeat 0 0")
                            .text("显示全部品牌");                  //改变背景图片和文本
                    $('ul li').removeClass("promoted");			// 去掉高亮样式
                }
                else
                {
                    $hideEnum.show();
                    //修改文本为显示"精简显示品牌"
                    //获取当前元素，也就是showmore
                    $(this).find("span")//寻找文本标签
                            .css("background","url(../../../images/jQuery/ch02/up.gif) no-repeat 0 0")//修改css
                            .text("精简显示品牌");

                    //最后高亮推荐品牌
                    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") //使用filter筛选
                            .addClass("promoted");  //高亮
                }

                return true;
            })
        })


    </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="#"><span>显示全部品牌</span></a>
    </div>
</div>
</body>
</html>

　　

 

对应的css文本

 

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 20px;
    text-align: center;
}

a {
    color: #04D;
    text-decoration: none;
}

a:hover {
    color: #F50;
    text-decoration: underline;
}

.SubCategoryBox {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    margin-top: 140px;
}

.SubCategoryBox ul {
    list-style: none;
}

.SubCategoryBox ul li {
    display: block;
    float: left;
    width: 200px;
    line-height: 40px;
}

.showmore {
    clear: both;
    text-align: center;
    padding-top: 10px;
}

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

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

.promoted a {
    color: #F50;
}

　　

效果展示：

 

 

posted @ 2017-03-27 00:11  cutter_point  阅读(167)  评论(0)    收藏  举报