<!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. 一键安装mysql5.6

    #!/bin/bash # @Name:install_mysql.sh # @Author:Eivllom # @Create -- # @Modify -- app_soft="/app ...

  2. （转载）Mysql使用Describe命令判断字段是否存在

    (转载)http://www.jz123.cn/plus/view.php?aid=39200 工作时需要取得MySQL中一个表的字段是否存在 于是就使用Describe命令来判断 mysql_con ...

  3. Eucalyptus安装包的功能列表

    aoetools    是一个用来在以太网上运行 ATA 存储协议的软件,相当于一个网络存储功能.euca2ools  eucalpytus客户端杜昂管理工具axis2c       SOAP引擎,同 ...

  4. TCP内核源码分析笔记

    Table of Contents 1 术语 1.1 ABC 1.2 SACK 1.3 D-SACK 1.4 FACK 1.5 F-RTO 1.6 nagle算法 1.7 cork算法 1.8 tem ...

  5. RabbitMQ挂掉问题处理

    开发环境中的rabbitmq总是会挂掉,rabbitmq的执行都是ssh远程登录执行命令: rabbitmq-server & 认为加了&,进程会在后台执行不会受到终端的影响.所以不知 ...

  6. hibernate4.3.8与spring mvc结合遇到的问题

    2703 [2015-01-21 16:47:42 ] - [ip=, ref=, ua=, sid=] WARN o.h.e.jdbc.spi.SqlExceptionHelper - SQL Er ...

  7. C#读写共享文件夹

    该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

  8. Android导出jar包后的资源使用问题

    我们常常遇到一个需求,就是给别人使用我们project的时候,为了可以屏蔽代码,把代码封装成jar包提供给第三方使用,可是这样我们的资源文件怎么给对方用呢? 网上有非常多方法,实用ClassLoade ...

  9. Linux &amp; Mac curl 命令行使用——POST&amp;GET

    http提交一个表单,比較经常使用的是POST模式和GET模式 在curl的命令行下,GET模式什么option都不用.仅仅须要把变量写在url里面就能够了 比方: curl http://www.s ...

  10. 三种root的修补方式

    三种root的修补方式 system/core/adb/abd.c adbd漏洞,请看abd.c的第917行/* then switch user and group to "shell&q ...