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

        $(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. centos一键优化脚本

    centos一键优化脚本:细节:http://oldboy.blog.51cto.com/2561410/1336488网络状态优化:http://oldboy.blog.51cto.com/2561 ...

  2. REST风格的原则

    一个好的RESTful API,应该具备以下特征: 这个API应该是对浏览器友好的,能够很好地融入Web,而不是与Web格格不入. 浏览器是最常见和最通用的REST客户端.好的RESTful API应 ...

  3. display:inline-block的坑

    一直用display:inline-block做某种导航栏还很爽,突然有一个柱状图的需求便也这么做了,于是成功被坑. 简简单单个需求,大致这样 只用几个li加上display:inline-block ...

  4. 让Dapper+SqlCE支持ntext数据类型和超过4000字符的存储

    使用Dapper和SqlCE进行开发的时候,如果数据库的某字段是采用的ntext数据类型,并且在这个字段存储的数据超过了4000个字符,会报如下的错误: Invalid parameter Size ...

  5. 每天一个linux命令(19):Linux 目录结构

    对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...

  6. Callable、Future和FutureTask

    创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口.这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需要获取执行结果,就必须通过共享变量或者使用线 ...

  7. iOS边练边学--cocoaPods管理第三方框架--命令行方式实现

    更换源 Gem是一个管理Ruby库和程序的标准包,它通过Ruby Gem(如 http://rubygems.org/)源来查找.安装.升级和写在软件包 gem sources --remove ht ...

  8. 领域事件DomainEvents

    静态类DomainEvents: public static class DomainEvents { [ThreadStatic] private static List<Delegate&g ...

  9. AC自动机(转)

    http://www.cppblog.com/mythit/archive/2009/04/21/80633.html 首先简要介绍一下AC自动机:Aho-Corasick automation,该算 ...

  10. Java 关键字 native

    native 关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件中,而是在用其他语言实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过JNI接口调用其他语言 ...