<!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的更多相关文章

  1. lua -- 在弹框中显示物品列表

    -- 宝箱打开后,显示里面的物品列表 -- 显示方式是:一个一个显示,每三个一行,一行显示完就移动到下一行, -- 接下来的一样要显示框的中间位置,方便玩家看 function UIBagContro ...

  2. Unity3D游戏开发——显示物品的仓库UI

    访问仓库物品列表的方法 为了在UI中显示物品列表,我们需要给InventoryManager添加两个能够访问它的公有方法: 代码: ··· public List<string> GetI ...

  3. linux如何隐藏和显示所有窗口?

    centos7 基本上就跟fedora23是一样的了, 也许它们使用的内和是一样的, fedora23使用的是4.2.3, 所以使用fedora对使用centos和redhat是有优势和好处福利的. ...

  4. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  5. 问题：关于坛友的一个定时重复显示和隐藏div的实现

    需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...

  6. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  7. Cocos2d-X3.0 刨根问底（五）----- Node类及显示对象列表源码分析

    上一章 我们分析了Cocos2d-x的内存管理,主要解剖了 Ref.PoolManager.AutoreleasePool这三个类,了解了对象是如何自动释放的机制.之前有一个类 Node经常出现在各种 ...

  8. 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  9. Angular 显示英雄列表

    在本页面,你将扩展<英雄指南>应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息. 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示. 最终,你会从远端的数 ...

随机推荐

  1. ♫【JS基础】壹零零壹

    如何面试一个前端开发者? function spacify(str) { return str.split('').join(' ') } console.log(spacify('hello wor ...

  2. 2015第40周二Node学习

    node历史 今天看cnode开源项目用了io.js,在查这个项目时发现这篇文章node历史,node.js和io.js关系谈到Node.js的由来,不可避免要聊到它的创始人Ryan Dahl.在20 ...

  3. Java---实现运行任意目录下class中加了@MyTest的空参方法(实现图形界面)

    说明: 因为上个代码,总是要输入完整的绝对路径,比较麻烦,于是,就写了这个小程序,直接进入文件对话框选择需要运行的class文件. 只需要提前输入完整的类名. 注意:加的MyTest必须打个包,加上: ...

  4. 使用Sublime Text搭建python调试环境

    原文地址:http://blog.csdn.net/wenxuansoft/article/details/38559731 pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的 ...

  5. stl中的空间配置器

    一般我们习惯的c++内存配置如下 class Foo { ... }; Foo* pf = new Foo; delete pf; 这里的new实际上分为两部分执行.首先是先用::operator n ...

  6. SRM 504(2-1000pt)

    DIV2 1000pt 题意:对于一个n*m的矩阵,每个格子都有一个颜色B或者W.对矩阵A执行以下程序后变成矩阵B.给出矩阵B,求A.(若有多种情况,输出字典序最小的).(n,m <= 16) ...

  7. hdoj 1711 Number Sequence【求字串在母串中第一次出现的位置】

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. 【转】WebStorm 2016 最新版激活(activation code方式)

    作者:=金刚=博客地址:http://www.cnblogs.com/woaic WebStorm 最新版本激活方式:今天下载最新版本的WebStorm,发现原来的通过license server激活 ...

  9. MyBatis架构图

    MyBatis架构 MyBatis依赖的jar不多,而且代码行数也没多少,其中使用了大量的设计模式,值得好好学习.下图是MyBatis的一张架构图,来自Java框架篇—Mybatis 入门. Myba ...

  10. 关于python保留几位小数，不进行四舍五入的方法

    def cut(num,c): c=10**(-c) return (num//c)*c print cut(2.999,2) 不过有一部分数会出现问题,还请大神评论 例如: >>> ...