折叠菜单及选择器的运用


Posted in Javascript onFebruary 03, 2017

今天才发现原来筛选标签还可以这么用。

not(expr|ele | fn):从匹配元素的集合中删除与指定表达式匹配的元素

下面demo中的使用:   var $category =  $(".sub-category-box>ul>li:gt(2):not(:last)");  //列表中索引大于2的,除了最后一个

filter(expr|obj|ele|fn) :r筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("ul>li").filter(":contains('佳能'),:contains('索尼'),:contains('三星')") .toggleClass("promoted");// 筛选出li标签中包含佳能、索尼、三星的标签,并设置class

找个demo中使用了这两个方法。 突然感觉 jQuery真的是好强大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .sub-category-box{
      width: 300px;
      border: 1px solid #000;
      margin: 20px auto;
      background-color: gainsboro;
    }
    .sub-category-box ul{
      list-style: none;
      width: 100%;
      overflow: hidden;
    }
    .sub-category-box ul li{
      float: left;
      width: 95px;
      height: 35px;
      text-align: center;
      background-color: darkorange;
      box-sizing: border-box;
      line-height: 40px;
      border-radius: 5px;
      margin: 2px;
    }
    .promoted{
      background-color: red !important;
      color: white !important;
    }
    .sub-category-box .show-more{
      width: 100%;
      height: 30px;
      border: 1px solid #000;
      text-align:center;
    }
    .sub-category-box .show-more a{
      text-decoration: none;
      line-height: 30px;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(function () {
      //列表中索引大于2的,除了最后一个
      var $category = $(".sub-category-box>ul>li:gt(2):not(:last)");
      $category.hide();

      $('.show-more').click(function () {
        $category.stop().slideToggle(300);
        //筛选出符合条件的选择器
        $("ul>li").filter(":contains('佳能'),:contains('索尼'),:contains('三星')")
             .toggleClass("promoted");
        return false;
      });
    });
  </script>
</head>
<body>
<div class="sub-category-box">
  <ul>
    <li>佳能</li>
    <li>索尼</li>
    <li>三星</li>
    <li>尼康</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>理光</li>
    <li>明基</li>
    <li>松下</li>
    <li>卡西欧</li>
    <li>富士</li>
    <li>柯达</li>
    <li>海尔</li>
    <li>其他品牌</li>
  </ul>
<div class="show-more">
  <a href="javasript:void(0);">显示全部品牌</a>
</div>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
jQuery读取XML文件的方法示例
Feb 03 #Javascript
JavaScript函数基础详解
Feb 03 #Javascript
JavaScript提高加载和执行效率的方法
Feb 03 #Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 #Javascript
Node.js的特点详解
Feb 03 #Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 #Javascript
javascript判断回文数详解及实现代码
Feb 03 #Javascript
You might like
php-fpm服务启动脚本的方法
2018/04/27 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
python异步任务队列示例
2014/04/01 Python
python实现的重启关机程序实例
2014/08/21 Python
Python实现栈的方法
2015/05/26 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
医护人员英文求职信范文
2013/11/26 职场文书
家长对孩子评语
2014/01/30 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
体育节口号
2014/06/19 职场文书
欢度春节标语
2014/07/01 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
MYSQL 表的全面总结
2021/11/11 MySQL