折叠菜单及选择器的运用


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 相关文章推荐
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
基于JavaScript实现省市联动效果
Jun 22 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 随机数的深入理解
2013/06/05 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
JavaScript如何操作css
2020/10/24 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
详解python算法之冒泡排序
2019/03/05 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
事业单位请假制度
2014/01/13 职场文书
渡河少年教学反思
2014/02/12 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
湘江北去观后感
2015/06/15 职场文书
Python利用capstone实现反汇编
2022/04/06 Python