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

        $(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. wooyun本地数据抓取

    ---- #-*-coding:utf-8-*- import re import urllib import MySQLdb import time from urllib import unquo ...

  2. perl 简单学习,安装perl模块

    检查是否安装了某个perl模块 有多种方式 0.perldoc perlinstall 列出所有的模块及版本号 1. perl -M模块名 -e 1(模块名不加空格) 没有返回值则说明有此模块 2.p ...

  3. scrapy 爬取 useragent

    useragentstring.com 网站几乎廊括了所有的User-Agent,刚学了scrapy,打算那它练手,把上面的 user-agent 爬取下来. 本文只爬取常见的 FireFox, Ch ...

  4. 2016国产恐怖惊悚《诡娃》HD720P.国语中字

    导演: 蒋国权编剧: 任旭东主演: 李抒航 / 程媛媛 / 孔维类型: 惊悚 / 恐怖制片国家/地区: 中国大陆语言: 汉语普通话上映日期: 2016-02-25(中国大陆)片长: 89分钟诡娃的剧情 ...

  5. Self Organizing Maps (SOM): 一种基于神经网络的聚类算法

    自组织映射神经网络, 即Self Organizing Maps (SOM), 可以对数据进行无监督学习聚类.它的思想很简单,本质上是一种只有输入层--隐藏层的神经网络.隐藏层中的一个节点代表一个需要 ...

  6. DLL函数中内存分配及释放的问题

    DLL函数中内存分配及释放的问题 最近一直在写DLL,遇到了一些比较难缠的问题,不过目前基本都解决了.主要是一些内存分配引起问题,既有大家经常遇到的现象也有特殊的 情况,这里总结一下,做为资料. 错误 ...

  7. EntityFramework:值不能为 null。参数名: entitySet 异常解决方案

    昨天EF莫名其妙的,掉所有接口访问都出现如下错误:百度,Google了半天,倒是有很多人都遇到了这个问题,但都没有一个解决方案,或者解决方案无效.通过层层排除,终于找到问题的所在.记录下来,给以后再遇 ...

  8. AutoMapper用法(转载)

    申明 本文转载自http://www.qeefee.com/article/automapper 作者:齐飞 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前,我 ...

  9. deerlet-redis-client添加集群支持,邀请各路大神和菜鸟加入。

    引言 经过几周的修改,deerlet已经添加了对于redis集群的支持,策略与memcached客户端一样,采用一致性Hash.不过目前Hash的算法取自Java自带的String类型的HashCod ...

  10. [BZOJ 1483][HNOI 2009]梦幻补丁(有序表启发式合并)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1483 分析: 先将不同的颜色的出现位置从小到大用几条链表串起来,然后统计一下答案 对于 ...