jquery案例9——网站品牌列表展开收起效果

最新推荐文章于 2024-05-16 17:32:20 发布

耶啵奶膘

最新推荐文章于 2024-05-16 17:32:20 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/xulihua_75/article/details/124809810

版权

jquery 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一、案例效果

请添加图片描述

二、案例完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</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 {
            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(img/down.gif) no-repeat 2px center;
            /* background-position: 2px center; */
        }
        
        .red {
            color: #F50;
            font-weight: bold
        }
    </style>
    <script type="text/javascript" src="./js/jQuery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //一、隐藏部分品牌
            var $hideList = $(".SubCategoryBox li:gt(5):not(:last)");
            $hideList.hide();
            //二、点击
            var $showMore = $(".showmore");
            $showMore.click(function() {
                //判断
                var now = $(".showmore span").text();
                //也可根据隐藏品牌是否可见进行判断
                if (now == "收起") {
                    //展开（4个变化）
                    //1、隐藏"隐藏品牌"
                    $hideList.hide();
                    //2、部分品牌不再"高亮"
                    /*$(".SubCategoryBox li a:contains('佳能')").addClass("red");
                    $(".SubCategoryBox li a:contains('索尼')").addClass("red");
                    $(".SubCategoryBox li a:contains('三星')").addClass("red");*/
                    $(".SubCategoryBox li a").filter(":contains('佳能'),:contains('索尼'),:contains('三星')").removeClass("red");
                    //3、"收起"变为"展开"
                    $(".showmore span").text("展开");
                    //4、修改"背景图片"
                    $(".showmore span").css("background", "url(img/down.gif) no-repeat 2px center");
                } else {
                    //如果当前隐藏列表是不可见的
                    //展开（4个变化）
                    //1、显示"隐藏品牌"
                    $hideList.show();
                    //2、部分品牌"高亮"显示
                    /*$(".SubCategoryBox li a:contains('佳能')").addClass("red");
                    $(".SubCategoryBox li a:contains('索尼')").addClass("red");
                    $(".SubCategoryBox li a:contains('三星')").addClass("red");*/
                    $(".SubCategoryBox li a").filter(":contains('佳能'),:contains('索尼'),:contains('三星')").addClass("red");
                    //3、"展开"变为"收起"
                    $(".showmore span").text("收起");
                    //4、修改"背景图片"
                    $(".showmore span").css("background", "url(img/up.gif) no-repeat 2px center");
                }
                return false;
            });

        });
    </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.html"><span>展开</span></a>
        </div>
    </div>
</body>

</html>

耶啵奶膘

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jquery案例9——网站品牌列表展开收起效果

一、案例效果二、案例完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title
复制链接

扫一扫