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

        $(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 进程通信(共享内存区)

    共享内存是由内核出于在多个进程间交换信息的目的而留出的一块内存区(段). 如果段的权限设置恰当,每个要访问该段内存的进程都可以把它映像到自己的私有地址空间中. 如果一个进程更新了段中的数据,其他进程也 ...

  2. C# 杂项

    1,函数访问等级必须高于参数等级,如函数等级是PUBLIC,则参数必须高于等于PUBLIC,若为INTERNAL 则不行.INTERNAL 低于PUBLIC, 用于同一个程序集内引用,PUBLIC则可 ...

  3. MSSQL 分组后取每组第一条(group by order by)

    查询中经常遇到这种查询,分组后取每组第一条.分享下一个SQL语句: --根据 x 分组后.根据 y 排序后取第一条 select * from ( select ROW_NUMBER() over(p ...

  4. 《图解tcp/ip》读书笔记(一)

           我先讲三句话:        一."万物互联的时代到了."我们生活在这样一个互联网急速发展的时代,也许很快就会发现,你能接触到的一切都可以连接到互联网了,电脑.手机这 ...

  5. 足球运动训练心得及经验分析-c语言学习调查

    在准备预备作业02之前,我参考娄老师的提示,阅读了<[做中学(Learning By Doing)]之乒乓球刻意训练一年总结>一文. 在文章描述的字里行间,给予我的印象是系统.负责,娄老师 ...

  6. iOS使用AVFoundation实现二维码扫描(ios7以上)——转载

    关于二维码扫描有不少优秀第三方库: ZBar SDK 里面有详细的文档,相应介绍也非常多,如:http://rdcworld-iphone.blogspot.in/2013/03/how-to-use ...

  7. SVN中trunk、branches、tags用法详解

    Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/. 那么标准的svn布局是:svn://proj/|+-trunk+-branches+-t ...

  8. 连贯接口(fluent interface)的Java实现及应用。

    几年前在单元测试时使用mockito和junit(使用hamcrest提供的比较方法)的时候,就用到过这样类似的语法: mockito: when(mock.someMethod("some ...

  9. error C2065: “IDD_DIALOG1” : 未声明的标识符

    编译时提示error C2065: “IDD_DIALOG1” : 未声明的标识符 错误的可能原因及解决方法如下: 1.出错文件中没有包含资源文件ID声明的resource.h文件.在出错文件中加入# ...

  10. TranslateAnimation 使用详解

    Android JDK为我们提供了4种动画效果,分别是: AlphaAnimation,RotateAnimation, ScaleAnimation, TranslateAnimation.今天我想 ...