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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
深入分析jQuery.one() 函数
Jun 03 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堆排序(heapsort)练习
2013/11/13 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php实现生成验证码实例分享
2016/04/10 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python算法表示概念扫盲教程
2017/04/13 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
化验室技术员岗位职责
2013/12/24 职场文书
家长会邀请书
2014/01/25 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书