jQuery的品牌列表效果

最新推荐文章于 2022-05-16 22:30:01 发布

Eveweiscsdn

最新推荐文章于 2022-05-16 22:30:01 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/54344707

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="jquery-1.8.3.min.js"></script>
    <style>
    .Category {
        width: 500px;
        height: 180px;
        border: 1px solid #fde;
        margin: auto;
    }
    
    .Category li {
        list-style-type: none;
        float: left;
        margin-left: 30px;
        margin-right: 30px;
        display: block;
    }
    
    a {
        text-decoration: none;
        color: #cc1;
    }
    
    .showmore {
        clear: both;
        width: 150px;
        height: 30px;
        border: 1px solid #acf;
        margin: 0 auto;
        text-align: center;
    }
    
    .showmore a {
        text-decoration: none;
        color: #9bd;
    }
    
    .pro a {
        color: red;
    }
    </style>
</head>

<body>
    <div class="Category">
        <ul>
            <li><a href="#">佳能</a><i>(30425)</i></li>
            <li><a href="#">Sony</a><i>(30456)</i></li>
            <li><a href="#">三星</a><i>(32549)</i></li>
            <li><a href="#">尼康</a><i>(27888)</i></li>
            <li><a href="#">松下</a><i>(52855)</i></li>
            <li><a href="#">富士</a><i>(94577)</i></li>
            <li><a href="#">柯达</a><i>(52788)</i></li>
            <li><a href="#">爱国者</a><i>(57885)</i></li>
            <li><a href="#">理光</a><i>(45785)</i></li>
            <li><a href="#">卡西欧</a><i>(85522)</i></li>
            <li><a href="#">明基</a><i>(57544)</i></li>
            <li><a href="#">奥林巴斯</a><i>(58757)</i></li>
            <li><a href="#">其他品牌相机</a><i>(45752)</i></li>
        </ul>
        <div class="showmore">
            <a href="#"><span>显示全部品牌</span></a>
        </div>
    </div>
    <script>
    $(document).ready(function() {
        var $category = $('ul li:gt(5):not(:last)');//获取大于第6个li标签的所有集合，除了最后一个
        $category.hide();//让它们隐藏
        var $toggleBtn = $('div.showmore >a');//获取按钮
        $toggleBtn.toggle(function() {
            $category.show();
            $(this).find('span').text("精简显示品牌")
            $('ul li').filter(":contains('佳能'),:contains('富士'),:contains('尼康')").addClass("pro");//筛选出内容匹配对象，然后添加class
            return false;
        }, function() {
            $category.hide();
            $(this).find('span').text("显示全部品牌");
            $('ul li').removeClass("pro");
        });
    });
    </script>
</body>

</html>

精简效果如图所示：

全部效果如图所示：

Eveweiscsdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的品牌列表效果

代码如下： .Category { width: 500px; height: 180px; border: 1px solid #fde; margin: auto; } .Category li { list-s
复制链接

扫一扫