<!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. Light OJ 1004 - Monkey Banana Problem（DP）

    题目大意: 给你一菱形的数字阵,问从最上面走到最下面所能获得的最大值是多少? #include<cstdio> #include<cstring> #include<io ...

  2. 嵌入式设备web服务器比较

    目录(?)[-] Boa Thttpd Mini_httpd Shttpd Lighttpd Goahead AppWeb Apache 开发语言和开发工具 结论 备注   现在在嵌入式设备中所使用的 ...

  3. sql server 删除索引的语句

    DROP INDEX index_name ON talbe_nameDROP INDEX IX_TBlueyBook_10 ON 表名

  4. cf702B Powers of Two

    B. Powers of Two time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  5. 用document.getElementsByTagName()返回的真的是数组吗？

    document.getElementsByTagName()返回的真的是数组吗? 这是这几天开发中遇到的问题. 一个如下的HTML结构: <ul> <li> <li&g ...

  6. iOS Block中的weakSelf/strongSelf

    Objective C 的 Block 是一个很实用的语法,特别是与GCD结合使用,可以很方便地实现并发.异步任务.但是,如果使用不当,Block 也会引起一些循环引用问题(retain cycle) ...

  7. JDBC 之 事务

    1.概念:事务指逻辑上的一组操作,组成这组操作的各个单元,要么全部成功,要么全部不成功. 2.数据库开启事务的命令dtl: Start transaction开启事务 Rollback回滚事务(撤销) ...

  8. Druid数据库连接池使用

    转: http://lj6684.iteye.com/blog/1770093 阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好   简单使用介绍 Dru ...

  9. Drawer_layout 关闭滑动视图

    在android抽屉Drawer_layout开发中,我需要关闭滑动的试图 找到了这个方法 mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MOD ...

  10. Hadoop HDFS (3) JAVA訪问HDFS

    如今我们来深入了解一下Hadoop的FileSystem类. 这个类是用来跟Hadoop的文件系统进行交互的.尽管我们这里主要是针对HDFS.可是我们还是应该让我们的代码仅仅使用抽象类FileSyst ...