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 easyui如何实现格式化列
Jul 30 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现简单轮播图效果
Dec 27 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+highchats生成动态统计图
2014/05/21 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
js实现开关灯效果
2020/03/30 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python实现感知机模型的示例
2020/09/30 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
文员岗位职责
2013/11/09 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python