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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php读取xml实例代码
2010/01/28 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php实现数据库的增删改查
2017/02/26 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
javascript实现计算器功能
2020/03/30 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python字符串连接方法分析
2016/04/12 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python实现自动发送邮件
2018/06/20 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python实现接口并发测试脚本
2019/06/25 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python Selenium库的基本使用教程
2021/01/04 Python
计算机专业个人求职自荐信
2013/09/21 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
初中班主任心得体会
2016/01/07 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书