<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

 <link rel="stylesheet" type="text/css" href="css/default.css" />

<!-- 引入jQuery -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){                                     //  等待DOM加载完毕.

    var $category = $('ul li:gt(5):not(:last)');             //  获得索引值大于5的品牌集合对象(除最后一条)

    $category.hide();                                //  隐藏上面获取到的jQuery对象。

    var $toggleBtn = $('div.showmore > a');             //  获取“显示全部品牌”按钮

    $toggleBtn.click(function(){

          if($category.is(":visible")){

                $category.hide();                            //  隐藏$category

                $(this).find('span')

                    .css("background","url(img/down.gif) no-repeat 0 0")

                    .text("显示全部品牌");                  //改变背景图片和文本

                $('ul li').removeClass("promoted");            // 去掉高亮样式

          }else{

                $category.show();                            //  显示$category

                $(this).find('span')

                    .css("background","url(img/up.gif) no-repeat 0 0")

                    .text("精简显示品牌");                  //改变背景图片和文本

                $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

                    .addClass("promoted");                //添加高亮样式

          }

        return false;                              //超链接不跳转

    })

})

</script>

</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="more.html"><span>显示全部品牌</span></a>

</div>

</div>

</body>

</html>

css 文件

*{ margin:; padding:;}

body {font-size:12px;text-align:center;}

a { color:#04D; text-decoration:none;}

a:hover { color:#F50; text-decoration:underline;}

.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}

.SubCategoryBox ul { list-style:none;}

.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}

.showmore { clear:both; text-align:center;padding-top:10px;}

.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}

.showmore a span { padding-left:15px; background:url(../img/down.gif) no-repeat 0 0;}

.promoted a { color:#F50;}

展示

jquery hide() show()的更多相关文章

  1. 简单的jQuery hide()方法演示

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>jQu ...

  2. jQuery hide()并不等于hide(0)

    在实际使用中,经常用hide()函数来隐藏HTML元素,通常是没有什么问题的,但在一次做二级下拉菜单时遇到了问题,后来才发现有时候“speed”是不能省略的,即使“speed=0”,也就是说hide( ...

  3. jquery hide和show方法

    html 元素的显示和隐藏hide() 如果被选的元素已被显示,则隐藏该元素. show() 如果被选的元素已被隐藏,则显示该元素. <html> <head> <scr ...

  4. jquery hide和show使用

    $("#qitarenyuanDiv").hide("fast");$("#qitarenyuanDiv").show("fast ...

  5. jQuery hide() 参数callback回调函数执行问题

    $("#b").click(function() { $("div").hide(1000,bbb); //-------------1 bbb是一个函数,但这 ...

  6. JQuery 支持 hide 和 show 事件的方法与分析

    问题提出  JQuery不支持hide和show作为事件形式出现, 实际上这两个仅仅是JQuery对象的一个方法(fn): 有一类UI交互需求,根据一个DOM对象的或者显示对附属的DOM对象做相同操作 ...

  7. jquery之hide()用法详解

    注:  以下函数用法和hide()类似  [参数类型完全一样] toggle() hide() show() slideToggle() slideUp() slideDown() fadeToggl ...

  8. [2016-10-24]jQuery学习回顾笔记1.0

    一.如何把 jQuery 添加到网页 <script> 标签应该位于页面的 <head> 部分. <head> <script src="jquer ...

  9. jQuery 语法

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法实例 $(this).hide() 演示 jQuer ...

随机推荐

  1. 获取Android设备屏幕分辨率

    1.Android 4.3引入的wm工具: a.获取Android设备屏幕分辨率: adb shell wm size b.获取android设备屏幕密度: adb shell wm density ...

  2. UVa11248 Frequency Hopping（最大流+最小割）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33206 [思路] 最大流最小割. 可以确定的是如果不可行需要修改的 ...

  3. [Locked] Count Univalue Subtrees

    Count Univalue Subtrees Given a binary tree, count the number of uni-value subtrees. A Uni-value sub ...

  4. H - Parity game-poj1733（需要离散化）

    题意:给一个序列这个序列都是由0和1组成,现在随意拿出来一个序列,然后说出他的和是奇数还是偶数,因为有可能存在假话,让你判断前多少条没有假话,也就是查找第一个假话的位置-1 ///////////// ...

  5. bzoj4028: [HEOI2015]公约数数列

    Description 设计一个数据结构. 给定一个正整数数列 a_0, a_1, ..., a_{n - 1},你需要支持以下两种操作: 1. MODIFY id x: 将 a_{id} 修改为 x ...

  6. Visual Studio的2个有趣的插件：声音控制和放屁：）

    .NET Slave | Talk to, hear, touch and see your code介绍了2个有趣的Visual Studio的插件,你可以通过它们和你的代码对话. 声音控制(Voi ...

  7. IOS中内存管理机制浅解

    我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是 由系统自己管理的,放在栈上).如果一个对象创建并使用后没有得 ...

  8. uva 116 Unidirectional TSP （DP）

    uva 116 Unidirectional TSP Background Problems that require minimum paths through some domain appear ...

  9. Cocos2d-x 3.0 实例学习教程 前沿

    前一段时间学过cocos2d-x  2.x ,后来去做了一些别的项目.近期又想开发自己的游戏了,但是cocos2d-x 已经升级到3.0 ,好多API都变了.所以决定再把cocos2d-x学一遍,一是 ...

  10. Swift的闭包(一):闭包简介、闭包表达式的优化

    定义:Closures are self-contained blocks of functionality that can be passed around and used in your co ...