1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>品牌列表</title>
  6.     <link rel="stylesheet" type="text/css" href="css/index1.css">
  7.     <script type="text/javascript" src="scripts/jquery-1.12.0.js"></script>
  8. </head>
  9. <body>
  10.     <div class="SubCategoryBox">
  11.         <ul>
  12.             <li><a href="#">佳能</a><i>(30440)</i></li>
  13.             <li><a href="#">索尼</a><i>(27220)</i></li>
  14.             <li><a href="#">三星</a><i>(20808)</i></li>
  15.             <li><a href="#">尼康</a><i>(17821)</i></li>
  16.             <li><a href="#">松下</a><i>(32222)</i></li>
  17.             <li><a href="#">卡西欧</a><i>(30240)</i></li>
  18.             <li><a href="#">富士</a><i>(30449)</i></li>
  19.             <li><a href="#">柯达</a><i>5440)</i></li>
  20.             <li><a href="#">宾得</a><i>(12340)</i></li>
  21.             <li><a href="#">理光</a><i>(56740)</i></li>
  22.             <li><a href="#">奥林巴斯</a><i>(37440)</i></li>
  23.             <li><a href="#">明基</a><i>(30453)</i></li>
  24.             <li><a href="#">爱国者</a><i>(304760)</i></li>
  25.             <li><a href="#">其他品牌相机</a><i>(32440)</i></li>
  26.         </ul>
  27.         <div class="showmore">
  28.             <a href="#"><span>显示全部品牌</span></a>
  29.         </div>
  30.     </div>
  31.  
  32.     <script type="text/javascript" src="js/index1.js"></script>
  33. </body>
  34. </html>
  1. .SubCategoryBox{
  2.         width: 600px;
  3.         height: 300px;
  4.         border: 1px solid;
  5.         float: left;
  6.         margin-left: 300px;
  7.         margin-top: 100px;
  8. }
  9.  
  10. .SubCategoryBox ul li{
  11.     display: inline-block;
  12.     float: left;
  13.     width: 160px;
  14.     height: 20px;
  15.     margin-right: 10px;
  16.     text-align: center;
  17. }
  18. .SubCategoryBox ul li a{
  19.     text-decoration: none;
  20.     color: black;
  21. }
  22. .showmore{
  23.     clear: both;
  24.     display: block;
  25.     float: left;
  26.     margin-left: 260px;
  27.     margin-top: 30px;
  28. }
  29. .showmore a{
  30.     border: 1px solid #464646;
  31.     text-decoration: none;
  32. }
  33. .promoted{
  34.     color: red;
  35. }
  1. //第一种方法
  2. $(function(){
  3.     var $category = $('ul li:gt(5):not(:last)');
  4.  
  5.     $category.hide();
  6.     var $toggleBtn = $('div .showmore > a');
  7.     $toggleBtn.click(function(){
  8.         if($category.is(":visible")){
  9.             $category.hide();
  10.             $(this).find('span').text("显示全部品牌");
  11.             $('ul li').removeClass("promoted");
  12.         }else{
  13.             $category.show();
  14.             $(this).find('span').text("精简显示品牌");
  15.             $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
  16.         }
  17.         return false
  18.     })
  19. })
  20.  
  21. //第二种方法，使用jQuery自身存在的方法，能够给一个按钮添加一组交互事件，存在错误
  22. var $category = $('ul li:gt(5):not(:last)');
  23. $category.hide();
  24. var $toggleBtn = $('div .showmore > a');
  25. $toggleBtn.toggle(function(){
  26.     $category.hide();
  27.     $(this).find('span').text("显示全部品牌");
  28.     $('ul li').removeClass("promoted");
  29. },function(){
  30.      $category.show();
  31.     $(this).find('span').text("精简显示品牌");
  32.     $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
  33. })

jQuery-品牌列表案例的更多相关文章

  1. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  2. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

  3. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  4. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  5. jQuery操作列表数据转成Json再输出为html dom树

    jQuery 把列表数据转成Json再输出为如下 dom树 <div id="menu" class="lv1"> <ul class=&qu ...

  6. ecshop首页调用指定商品分类下的商品品牌列表

    转之--http://www.16css.com/ecshop/735.html 通过二次开发可以实现ECSHOP首页调用指定分类下的品牌列表. 第一步: 打开根目录下的index.php 在最后面 ...

  7. （五）Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  8. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  9. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

随机推荐

  1. Android异步加载访问网络图片-解析json

    来自:http://www.imooc.com/video/7871 推荐大家去学习这个视频,讲解的很不错. 慕课网提供了一个json网址可以用来学习:http://www.imooc.com/api ...

  2. 【剑指offer】题目36 数组中的逆序对

    数组中任取两个数字,如果前面的数字大于后面的数字称为一个逆序对 如:1,2,1,2,1 有3个逆序对 思路:知道O(N2)肯定是错的.开始想hash,试图找到O(n)的算法,想了很久,找不到.后来想到 ...

  3. Hibernate创建hqll时报错

    Hibernate 问题,在执行Query session.createQuery(hql) 报错误 出错截图: 这条语句在java运行环境下,直接连数据库不出错,如果在hiberante,strut ...

  4. Java_内存管理String and Array

    题目1.指出下列程序运行的结果 ()public class Example { String str = new String("good"); char[] ch = { 'a ...

  5. Java发送邮件初窥

    一.背景 最近朋友的公司有用到这个功能,之前对这一块也不是很熟悉,就和他一起解决出现的异常的同时,也初窥一下使用Apache Common Email组件进行邮件发送. 二.Java发送邮件的注意事项 ...

  6. [Android] adb 命令 dumpsys activity , 用来看 task 中的activity。 (uninstall virus)

    用“adb shell dumpsys activity”命令再来查看一下系统运行的的任务,就会看到: ACTIVITY MANAGER ACTIVITIES (dumpsys activity ac ...

  7. “无法更新EntitySet“*****”，因为它有一个DefiningQuery，而元素中没有支持当前操作的元素”问题的解决方法

    百思不得其解,最后发现 1:实体中的表必须有主键(数据库中的表必须有主键),如果没有,会有这样的提示 2:主键设置好后,运行还是会出现类似问题,那就一个郁闷 1):方法一:先从EF中删除刚设置主键的模 ...

  8. hdu 5018 Revenge of Fibonacci

    大水题 #include<time.h> #include <cstdio> #include <iostream> #include<algorithm&g ...

  9. 重拾smslib

    http://www.tuicool.com/articles/mm2yQrN http://blog.csdn.net/ll136078/article/details/8737348 http:/ ...

  10. 关于Java反射机制的几个问题

    >>如何在运行时确定对象类型 运行时类型识别(Run-time Type Identification, RTTI)主要有两种方式, 一种是在编译时和运行时已经知道了所有的类型,另外一种是 ...