折叠菜单及选择器的运用


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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
node内置调试方法总结
Feb 22 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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
多文件上载系统完整版
2006/10/09 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP强制转化的形式整理
2020/05/22 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
控制打印时页眉角的代码
2007/02/08 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
javascript window对象属性整理
2009/10/24 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
node.js实现快速截图
2016/08/27 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
js微信分享实现代码
2020/10/11 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JS实现打字游戏
2019/12/17 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
介绍一下linux的文件系统
2015/10/06 面试题
技校生自我鉴定
2013/12/08 职场文书
考试不及格的检讨书
2014/01/22 职场文书
企业办公室岗位职责
2014/03/12 职场文书
10的分与合教学反思
2014/04/30 职场文书
离职证明标准格式
2014/09/15 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL