JQuery 显示全部及隐藏部分的效果

最新推荐文章于 2022-03-26 23:03:43 发布

hxy87

最新推荐文章于 2022-03-26 23:03:43 发布

阅读量2.8k

点赞数 1

分类专栏： JQuery 文章标签： jquery function xhtml url div class

本文链接：https://blog.csdn.net/hxy87/article/details/6151250

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquery_3.aspx.cs" Inherits="JQuery.Char_2.Jquery_31" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <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 0 0;
        }
        .promoted a
        {
            color: #F50;
        }
    </style>
    <script type="text/javascript">
        $(function () {   //等待DOM加载完毕
            var $category = $('ul li:gt(5):not(:last)');   //获得索引值大于5的品牌集集合对象(除最后一条)
            $category.hide();    //隐藏上面获取到的Jquery对象
            var $toggleBtn = $('div .showmore > a');    //获取“显示全部品牌”按钮
            $toggleBtn.click(function () {
                if ($category.is(":visible")) {   //如果元素显示
                    $category.hide();   //隐藏$cateogry
                    $(".showmore a span").css("background", "url(../img/down.gif) no-repeat 0 0")
                .text("显示全部品牌");    //改变背景图片和文本
                    $('ul li').removeClass("promoted");    //移除高亮显示样式
                } else {
                    $category.show();    //显示上面获取到的Jquery对象
                    $('.showmore a span').css("background", "url(../img/up.gif) no-repeat 0 0")
            .text("精简显示品牌");    //改变背景图片和文本

                    $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
            .addClass("promoted");    //filter()方法筛选出内容包括佳能、尼康、奥林巴斯的品牌，为它们添加promoted样式
                }
                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>(12889)</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>
        <ul>
            <div class="showmore">
                <a href="Jquery_3.aspx"><span style="background:url('../img/down.gif') no-repeat 0 0">显示全部品牌</span></a>
            </div>
    </div>
</body>
</html>