折叠菜单及选择器的运用


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入门教程(1) 什么是JS
Jan 31 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
接收键盘指令的脚本
2006/06/26 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
vue2过滤器模糊查询方法
2018/09/16 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
numpy数组拼接简单示例
2017/12/15 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
《白鹅》教学反思
2014/04/13 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
车间主任岗位职责
2015/02/03 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Nginx配置https原理及实现过程详解
2021/03/31 Servers
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle