关于一个隐藏和显示物品列表的demo

时间：2021-07-20 22:56:34
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>关于一个隐藏和显示的小demo</title>

        <meta name="author" content="Administrator" />

        <!-- Date: 2016-03-18 -->

        <script src="script/jquery-1.12.2.js" type="text/javascript"></script>

        <style type="text/css">

            ul {

                list-style: none;

                padding: 0;

            }

        </style>

    </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="#">显示全部商品</a>

            </div>

        </div>

        <script type="text/javascript">

            //1.隐藏第七个以后但除了最后一个的所有的项目。

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

            $category.hide();

            //2.用户点击全部商品。

            var $showallthegoods = $(".showmore a");

            $showallthegoods.click(function() {

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

                    $category.hide();

                    $(".showmore a").text("显示全部商品");

                    return false;

                } else {

                    $category.show();

                    $(".showmore a").text("精简显示商品");

                    return false;

                }

            });

            //为佳能添加时间，点击能复制。

            $("ul li:eq(0)").click(function() {

                $(this).clone(true).appendTo("ul");//添加true代表该元素绑定的时间也会被复制。

            });

        </script>

    </body>

</html>

相关文章