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

        $(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. 万向节死锁 gimbal lock

    ,如下图一,把灰色箭头想象成是一架飞机,红,绿蓝三个圈看作是三个外围控制器,外圈带动所有里圈运动,里圈的运动不影响外圈. 1,首先,绕Y轴旋转(旋转绿圈),来确定前进的方向.这时红圈与蓝圈都跟着旋转. ...

  2. Uploadify v3.2.1 属性、事件、方法说明

    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonClass " 按钮样式 buttonCur ...

  3. php基础33:正则匹配-perl

    <?php //1.搜索数组中的相匹配的字符串 //preg_grep() 返回一个数组 $language = array("php","asp",&q ...

  4. matplotlib 的几种风格 练习

    〇.准备数据 import numpy as np x = np.linspace(0, 5, 10) y = x ** 2 一.matlab风格的API 1.单图 from pylab import ...

  5. Chrome 插件: 起动本地应用 (Native messaging)

    Chrome 插件: 起动本地应用 (Native messaging) www.MyException.Cn  网友分享于:2014-08-01  浏览:3次   Chrome 插件: 启动本地应用 ...

  6. Android使用service后台更新计划任务

    Service是Android的四大组件之一,这里就不再过多的去描述,下面主要实现启动应用时候利用service后台执行计划任务,退出应用后,关闭service,只存在整个应用的周期中. 首先使用se ...

  7. [VIM] 格式化代码

    快速使用vim格式化代码 在vim的编辑模式i下直接ESC退出道命令模式之后直接敲入如下命令: gg=G        将全部代码格式化 nG=mG    将第n行到第m行的代码格式化 注:如果ESC ...

  8. 从0开始学java——JSP&Servlet——web容器搜索class的路径顺序

    在web应用程序如果要用到某个类,会按照如下的顺序来搜索: 1)在WEB-INF/classes目录下搜索: 2)如果该目录下没有,则会到WEB-INF/lib目录下的jar文件中搜索: 3)如果还没 ...

  9. [CareerCup] 7.2 Ants on Polygon 多边形上的蚂蚁

    7.2 There are three ants on different vertices of a triangle. What is the probability of collision ( ...

  10. CentOS 6.5 安装Nginx 1.7.4

    一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...