jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能


Posted in jQuery onJanuary 29, 2021

最近在学习jQuery时接触到了show()、hide()、toggle()函数,于是利用这几个函数练习了一个使元素显示隐藏的案例:

小提示:代码中切换按钮上下的小图标可以在此链接品牌展示功能图片中获取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用hide()、toggle()函数实现相机品牌展示</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

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

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

    a:hover {
      color: #F50;
      /*text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。*/
      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, .showless {
      clear: both;
      text-align: center;
      padding-top: 10px;
    }

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

    .showmore a span {
      padding-left: 15px;
      /*最后两位数字是以左上角为(0,0)的坐标做一个偏移
       第一个数字是X轴上的偏移量,也就是横向的偏移量,正表示向右,负表示向左!
       第二个数字是Y轴上的偏移量,也就是横向的偏移量,正表示向下,负表示向上!*/;
      background: url(img/down.gif) no-repeat 0 3px;
    }

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

    .promoted a {
      color: #F50;
    }
  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      // 页面加载完成先隐藏部分相机品牌
      $("ul li:gt(5):not(:last)").hide();
      // filter函数筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
      // 这里筛选出保留需要单独添加样式的相机品牌
      var multiPromoted = $("li").filter(":contains('佳能'),:contains('索尼'),:contains('柯达')");
      // 获取到a标签绑定点击事件
      $("div div a").click(function () {
        // 切换显示与隐藏部分相机品牌
        $("ul li:gt(5):not(:last)").toggle();
        // 隐藏部分相机品牌时替换文字内容、角标图片、移除li下a标签文字样式
        if ($("ul li:gt(5):not(:last)").is(":hidden")) {
          $("a > span").html("显示全部品牌");
          $("div div").removeClass();
          $("div div").addClass("showmore");
          $(multiPromoted).removeClass("promoted");
        } else {
          // 显示部分相机品牌时替换文字内容、角标图片、添加li下a标签文字样式
          $("a > span").html("显示精简品牌");
          $("div div").removeClass();
          $("div div").addClass("showless");
          $(multiPromoted).addClass("promoted");
        }
      });
    });
  </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="#"><span>显示全部品牌</span></a>
  </div>
</div>
</body>
</html>

代码运行效果:

jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

功能展示效果:

jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

到此这篇关于jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能的文章就介绍到这了,更多相关jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
javascript add event remove event
2008/04/07 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
一个超级简单的python web程序
2014/09/11 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python dataframe NaN处理方式
2019/12/26 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
VC++笔试题
2014/10/13 面试题
市场部规章制度
2014/01/24 职场文书
项目经理聘任书
2014/03/29 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
单位租车协议书
2015/01/29 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python