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

        $(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. malloc/free和new/delete的区别

    转自:http://blog.csdn.net/chance_wang/article/details/1609081 malloc与free是C++/C语言的标准库函数,new/delete是C++ ...

  2. jquery 删除字符串最后一个字符的方法

    字符串:var s = "1,2,3,4,5," 目标:删除最后一个 "," 方法: s=s.substring(0,s.Length-1): 字符串:var ...

  3. 软件开发之路、Step 1 需求分析

    百度百科 需求分析 所谓"需求分析",是指对要解决的问题进行详细的分析,弄清楚问题的要求,包括需要输入什么数据,要得到什么结果,最后应输出什么.可以说,在软件工程当中的“需求分析” ...

  4. sql截取

    String sql2="select count(*) from t_testuser where substr(INSETTIME,1,10)=to_char(sysdate,'yyyy ...

  5. myeclipse 2014新建maven web 项目步骤

    首先在myeclipse中配置maven的安装路径: 在pom.xml中加上: 1 2 3 4 5 6 7 8 9 10  <plugins>           <plugin&g ...

  6. [CareerCup] 8.6 Jigsaw Puzzle 拼图游戏

    8.6 Implement a jigsaw puzzle. Design the data structures and explain an algorithm to solve the puzz ...

  7. 学习笔记——Maven 内置变量

    Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...

  8. swift项目实战FoodPin目录

    好吧,据说写博客能够找到好工作,那我也来分享一个项目吧! 自己自学iOS开发也有半年多了,现在就来分享一个swift的小项目吧!这个项目的来源是<Beginning iOS8 programmi ...

  9. Javascript日期时间总结

    写这篇文章,总结一下前端JavaScript遇到的时间格式处理. 1 C#时间戳处理 从后台返回的C#时间为:/Date(-62135596800000)/,这个是C#的DateTime.MinVal ...

  10. 远程办公《Remote》读书笔记:中国程序员在家上班月入过六万不是梦

    这不是一本新书,这是一本很值得中国程序员看的老书,所以我不是来做卖新书广告的:) 但它的确是一本好书,这本书在Amazon上3个business categories排第一.作者Jason Fried ...