例子:如图,默认不显示全部,点击按钮来回切换,全部显示是一部分推荐的品牌高亮。

        $(function(){  //dom加载完再执行
var category = $('ul li:gt(5):not(:last)'); //选中一开始需要隐藏的li,第六个li之后,并且不包含最后一个li
category.hide(); //隐藏
var toggleBtn = $('div.showmore > a'); //选中点击按钮
var toggleText = $('.showmore a span'); //选中需要按钮中的文字元素 toggleBtn.toggle(function(){
category.show();
toggleText.css("background", "#555").text("精简显示");
$('ul li').filter(":contains('佳能'), :contains('索尼')").addClass('promoted'); //选中需要高亮显示的品牌
}, function(){
category.hide();
toggleText.css("background", "#eee").text("全部显示");
$('ul li').removeClass('promoted'); //移除高亮类
});

锋利的jQuery-2--一个显示和隐藏的例子,主要看写法的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  3. jQuery效果之显示与隐藏

    .hide([duration][,complete])--目标元素的隐藏. .show([duration][,complete])--目标元素的显示: .toggle([duration][,co ...

  4. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  5. React Native基础&入门教程:以一个To Do List小例子,看props和state

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...

  6. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. jQuery下的显示和隐藏

    因为太久没更新了,所以来放一点没意思的内容. 做的是jQuery框架的隐藏和显示,HTML如下: <ul> <li>1</li> <li>2</l ...

  8. jquery渐渐的显示、隐藏效果

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  9. jquery点击显示或隐藏

    点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){     $("dd > a").click(fun ...

随机推荐

  1. 关闭linux centos各种声音

    shell报警 #vi /etc/inputrc ================================ set bell-style none 或 echo "set bell- ...

  2. js 中的算法题,那些经常看到的

    js中遇到的算法题不是很多,可以说基本遇不到.但面试的时候,尤其是一些大公司,总是会出这样那样的算法题,考察一个程序员的逻辑思维能力.如下: 1.回文. 回文是指把相同的词汇或句子,在下文中调换位置或 ...

  3. 2015年新版C#从入门到精通(第2版)视频教学录像【无水印版】

    <c#从入门到精通(第2版)>以零基础讲解为宗旨,用实例引导读者学习,深入浅出地介绍了c#的相关知识和实战技能.<c#从入门到精通(第2版)>第1篇[c#语言基础]主要讲解c# ...

  4. matlab取消和添加注释以及一些快捷键

    1 matlab中关于注释: 多行注释: 选中要注释的若干语句,工具栏菜单Text->Comment,或者鼠标右击选"Comment",或者快捷键Ctrl+R 取消注释: 选 ...

  5. 20135328信息安全系统设计基础第二周学习总结(vim、gcc、gdb)

    第三周学习笔记 学习计时:共8小时 读书:1 代码:5 作业:1 博客:7 一.学习目标 熟悉Linux系统下的开发环境 熟悉vi的基本操作 熟悉gcc编译器的基本原理 熟练使用gcc编译器的常用选项 ...

  6. HDU5336-XYZ and Drops-模拟

    模拟水珠那个游戏. 小水珠超过边界会消失. 会有两个水珠同时到达一个size=4大水珠的情况.要移动完统一爆炸 #include <vector> #include <cstdio& ...

  7. 20145215《Java程序设计》第7周学习总结

    20145215<Java程序设计>第七周学习总结 教材学习内容总结 Lambda 认识Lambda语法 Lambda语法概述: Arrays的sort()方法可以用来排序,在使用sort ...

  8. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  9. 关于 jquery select2 多个关键字 模糊查询的解决方法

    select2 只针对 元素的text()进行匹配,实际开发过程中可能会存在通过id 或者特殊编码进行 多关键字匹配. 改动了下源码:红色为改动部分. process=function(element ...

  10. Fluent NHibernate关系映射

    1.好处:Fluent NHibernate让你不再需要去写NHibernate的标准映射文件(.hbm.xml), 方便了我们的代码重构,提供了代码的易读性,并精简了项目代码 实现: (1).首先我 ...