<!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. 动态规划——C编辑最短距离

    C - 编辑距离 时间限制: 1000女士 内存限制: 65536KB 64位输入输出格式: %I64d & %I64u 提交 状态 描述 Let x and y be two strings ...

  2. How to Implement the IContextMenu Interface

    http://msdn.microsoft.com/en-us/library/windows/desktop/hh127443(v=vs.85).aspx IContextMenu is the m ...

  3. MVC的特点

    1.MVC模式 Mvc将应用程序分离为三个部分: Model:是一组类,用来描述被处理的数据,同时也定义这些数据如何被变更和操作的业务规则.与数据访问层非常类似. View:是一种动态生成HTML的模 ...

  4. centos安装GO

    1,下载 go1.5.1.linux-amd64.tar.gz 2,将go解压到/opt,个人喜好罢了[root@localhost ~]# tar -C /opt -xzf ./go1.5.1.li ...

  5. 351. Android Unlock Patterns

    这个题我真是做得想打人了卧槽. 题目不难,就是算组合,但是因为是3乘3的键盘,所以只需要从1和2分别开始DFS,结果乘以4,再加上5开始的DFS就行了. 问题是这个傻逼题目的设定是,从1到8不需要经过 ...

  6. JS中timestamp日期类型的转换

    在JS中获取timestamp:var timestamp=Math.round(new Date().getTime()/1000); 在JS中将timestamp转换为Date: Date.pro ...

  7. kubernetes kubeadm部署高可用集群

    k8s kubeadm部署高可用集群 kubeadm是官方推出的部署工具,旨在降低kubernetes使用门槛与提高集群部署的便捷性. 同时越来越多的官方文档,围绕kubernetes容器化部署为环境 ...

  8. [Javascript] Automating Releases with semantic-release

    There are so many repeated steps when releasing a new version of a library. The tool semantic-releas ...

  9. mac svn .a文件的上传方法

    1.首先确认是否安装了Command Line Tools,如果没有,就Xcode-Preference-Downloads,选择Command Line Tools-install就可以了 2.打开 ...

  10. Eclipse中使用git把项目导入到osc@git中

    方便Eclipse用户使用Git把项目导入到osc@git中进行管理. Eclipse Git osc@git 一.原有项目:  项目名为TestGit 二.在osc@git上面创建一个新项目库. 填 ...