折叠菜单及选择器的运用

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

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器:       最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换 思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu

  • jQuery实现的简单折叠菜单(折叠面板)效果代码

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

  • Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script

  • Bootstrap打造一个左侧折叠菜单的系统模板(二)

    Bootstrap打造一个左侧折叠菜单的系统模板(二)

    在上一篇文章给大家介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一),具体内容介绍可以点击了解详情. 1. 关于上一篇文章BUG 上一篇文章中有几位朋友提出的问题和BUG. 我简单的说一下. 1>. IE版本的支持? 我写的这些只是测试火狐谷歌浏览.在IE8+下可以添加代码以实现兼容. <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&qu

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • 微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

  • Bootstrap打造一个左侧折叠菜单的系统模板(一)

    Bootstrap打造一个左侧折叠菜单的系统模板(一)

    1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • JS实现超简单的仿QQ折叠菜单效果

    JS实现超简单的仿QQ折叠菜单效果

    本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

  • JS实现三级折叠菜单特效，其它级可自动收缩

    JS实现三级折叠菜单特效，其它级可自动收缩

    本文实例讲述了JS实现三级折叠菜单特效,其它级可自动收缩.分享给大家供大家参考,很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行具体如下: 小贴士:去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 运行效果图如下: 实现代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

随机推荐