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

Posted Arther_J

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于一个隐藏和显示物品列表的demo相关的知识,希望对你有一定的参考价值。

<!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>

 

以上是关于关于一个隐藏和显示物品列表的demo的主要内容,如果未能解决你的问题,请参考以下文章

如何在滚动列表视图上显示/隐藏底部导航视图?

Sphinx、reStructuredText 显示/隐藏代码片段

在android中显示隐藏片段

仅在一个片段中隐藏状态栏并在其他片段中显示

如何在 Android 中显示和隐藏菜单项?

隐藏/显示不同片段的操作栏选项菜单项