<!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. 一键源码安装Ansible

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

  2. weblogic启动报错之WLS_DIAGNOSTICS000000.DAT

    查看控制台日志报错信息如下: <-- 下午04时46分42秒 CST> <Notice> <Log Management> <BEA-> <The ...

  3. HDU 1151 Air Raid（最小路径覆盖）

    题目大意: 有n个城市,m条道路,城市的道路是单向.  现在我们的伞兵要降落在城市里,然后我门的伞兵要搜索所有道路.问我们最少占领多少个城市就可以搜索所有的道路了. 我们可以沿着道路向前走到达另一个城 ...

  4. QQ空间自动发广告解决方法

    最近空间好多人QQ都中了毒.每天我都有几十个好友刷空间话费.流量广告! QQ空间自动发广告的原因: 最近使用了刷赞或者其他QQ外挂软件(有些开发者或破解者会在这样的软件上留后门,请自己判断). 或者最 ...

  5. Json.Net学习笔记(十) 保持对象引用

    更多内容见这里:http://www.cnblogs.com/wuyifu/archive/2013/09/03/3299784.html 默认情况下,Json.Net将通过对象的值来序列化它遇到的所 ...

  6. Lucene实例教程

    Lucene是apache组织的一个用java实现全文搜索引擎的开源项目. 其功能非常的强大,api也很简单.总得来说用Lucene来进行建立 和搜索和操作数据库是差不多的(有点像),Document ...

  7. 【bzoj2594】[Wc2006]水管局长数据加强版

    真是神题 当时调了几天没调出来 后来没管了 当时把fread去掉就TLE,加上就RE 一直在底下跟网上的程序拍,尝试各种优化常数都没用 拍出几组不一样的,发现我是对的,醉了,网上那个是怎么过的 记一下 ...

  8. Thread Join()的用法

    Java Thread类有个 join() 方法,先前一直不知道是怎么用的,直到看到这篇文章.http://auguslee.iteye.com/blog/1292203 Java Thread中, ...

  9. 算法9-5：最大流算法的Java代码

    残留网络 在介绍最大流算法之前先介绍一下什么是残留网络.残余网络的概念有点类似于集合中的补集概念. 下图是残余网络的样例. 上面的网络是原始网络.以下的网络是计算出的残留网络.残留网络的作用就是用来描 ...

  10. Qt 学习之路：QFileSystemModel

    上一章我们详细了解了QStringListModel.本章我们将再来介绍另外一个内置模型:QFileSystemModel.看起来,QFileSystemModel比QStringListModel要 ...