jquery折叠菜单及选择器的运用

时间：2022-06-25 17:18:26 编辑：袖梨来源：一聚教程网

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

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真的是好强大。

代码如下复制代码

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Titletitle>

<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>

body>

html>

推荐专题

最新下载

热门教程

jquery折叠菜单及选择器的运用

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程