<!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. Smartdraw世界上最流行的商业绘图软件

    Smartdraw 更多图片(5张) SmartDraw是世界上最流行的商业绘图软件.2006 年获美国政府司法部 (U.S. Department of Justice) 专用软件,2007获美国政 ...

  2. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  3. openStack ceilometer API

    1.概述 Ceilometer是OpenStack中的一个子项目,它像一个漏斗一样,能把OpenStack内部发生的几乎所有的事件都收集起来,然后为计费和监控以及其它服务提供数据支撑.Ceilomet ...

  4. 关于 NoSQL 数据库你应该了解的 10 件事

    四分之一个世纪以来,关系型数据库(RDBMS)一直是主流数据库模型.但是现在非关系型数据库,“云”或者“NoSQL”数据库,正在作为一种替代数据库模型获得越来越多的占有率.本文中我们将关注非关系型 N ...

  5. 苹果教你六招：设计优秀的icon

    在iOS 7测试版发布后,网上开始出现大量关于iOS 7设计的资源.在WWDC期间,苹果曾为开发者举办了多场主题演讲,其中有一场是苹果UX布道师Mike Stern的精彩演讲-- 优秀iOS设计最佳实 ...

  6. angularJS 指令二

    指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...

  7. springMVC3学习(二)--ModelAndView对象

    当控制器处理完请求时,一般会将包括视图名称或视图对象以及一些模型属性的ModelAndView对象返回到DispatcherServlet. 因此,常常须要在控制器中构造ModelAndView对象. ...

  8. Spring4.0支持Groovy配置

    介绍 前一段时间观注了一下Spring4.0的一些特性,当中就有对Groovy配置的支持.因为临时还没有很深入的研究.所以举个小样例来说明一下怎样支持Groovy配置. package shuai.s ...

  9. 一些Linux优化方法

    1. 利用栈做备胎,减少分配空间的几率,IO自己有一份缓存,如果超了就使用stack空间 2. 分散IO:代表readv,可以通过一次系统调用,将内容读到分散的缓存中,可以减少系统的系统调用

  10. php laravel mysql无法连接处理方案（linux服务器配置）

    阿里云 Ubuntu 14.*上搭建laravel环境 之前做项目时都是搭建在自己的服务器上,可是自己的那个服务器是很久以前一点点配置好的,也是各种百度,该忘记的都忘了, 所以前一段在客户的阿里云Ub ...