折叠菜单及选择器的运用


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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
面包屑导航详解
Dec 07 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
vue源码中的检测方法的实现
Sep 26 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php正则校验用户名介绍
2008/07/19 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
js loading加载效果实现代码
2009/11/24 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
java必学必会之static关键字
2015/12/03 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python实现apahce网站日志分析示例
2014/04/02 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
天游软件面试
2013/11/23 面试题
西安众合通用.net笔试题
2013/03/18 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
销售活动策划方案
2014/08/26 职场文书
党员民主评议总结
2014/10/20 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python
python数字图像处理:图像简单滤波
2022/06/28 Python