文档章节

jquery 精简切换

hey--老妖
 hey--老妖
发布于 2017/02/26 11:32
字数 339
阅读 5
收藏 0

	<div class="SubCategoryBox">
		<ul>
			<li ><a href="#">佳能</a><i>(30440) </i></li>
			<li ><a href="#">索尼</a><i>(27220) </i></li>
			<li ><a href="#">三星</a><i>(20808) </i></li>
			<li ><a href="#">尼康</a><i>(17821) </i></li>
			<li ><a href="#">松下</a><i>(12289) </i></li>
			<li ><a href="#">卡西欧</a><i>(8242) </i></li>
			<li ><a href="#">富士</a><i>(14894) </i></li>
			<li ><a href="#">柯达</a><i>(9520) </i></li>
			<li ><a href="#">宾得</a><i>(2195) </i></li>
			<li ><a href="#">理光</a><i>(4114) </i></li>
			<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li ><a href="#">明基</a><i>(1466) </i></li>
			<li ><a href="#">爱国者</a><i>(3091) </i></li>
			<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
<script type="text/javascript">
	$(function(){
		//从第7条开始隐藏后面的品牌(最后一条除外)
		var $category=$("ul li:gt(5):not(:last)");
		$category.hide();
		//获取“显示品牌按钮”
		var $toggleBtn=$("div.showmore > a");

		$toggleBtn.click(function(){
			//如果文本是可见的
			if($category.is(":visible")){
				//那么将文本 隐藏
				$category.hide();
				//切换文本、图片
				$(this).find("span").css("background","url(img/down.gif) no-repeat 0 0").text("显示全部品牌");
				//移除 高亮 元素
				$("ul li").removeClass("promoted")
			}else{
				//显示全部文本 
				$category.show();
				//改变文本和图片
				$(this).find("span").css("background","url(img/up.gif) no-repeat 0 0").text("精简显示品牌");
				//添加高亮样式
				$("ul li").filter(":contains('尼康'),:contains('佳能'),:contains('奥林巴斯')").addClass("promoted");
				
			}

			return false;  //超链接不跳转
		})
        })
</script>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: jquery DOM操作
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
jQuery 1.7将HTML5引入IE6-8,实施弃用策略

jQuery 1.7已于近日发布。新版本做出多项改进,如新的事件API,委托事件的性能更高,对IE6-8的HTML5支持,对AMD规范的支持等等。同时,jQuery还弃用了某些特性,以使jQuery保持精简。 以下是...

张金富
2011/11/18
3.8K
16
jQuery 1.7增加了对html5的支持

切图网(www.qietu.com)讯:jQuery最新版本添加了对html5的支持,发布的版 本号为jQuery1.7。 jQuery对我们来说一点也不陌生,作为一个第三发的js插件,影响程度居然影响了整个javascript书...

tyshymy
2012/02/06
0
0
jQuery 3.0 —— 下一代的 jQuery

jQuery发布已经快八年了,挺让人难以置信。过去的这些年Web开发变了很多,jQuery也随之变化着。在这个过程中,团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。...

oschina
2014/10/30
14K
25
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

StringRedisTemplate的使用

《如何使用RedisTemplate访问Redis数据结构》

yan_liu
7分钟前
0
0
好程序员大数据教程Hadoop全分布安装(非HA)

  机器名称 启动服务   linux11 namenode secondrynamenode datanode   linux12 datanode   linux13 datanode   第一步:更改主机名,临时修改+永久修改   临时修改:hostname ...

好程序员IT
11分钟前
0
0
案例:通过shell脚本实现mysql数据备份与清理

Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口。它接收用户输入的命令并把它送入内核去执行,实际上Shell是一个命令解释器,它解释由用户输入的命令并且把它们送到内核,不仅...

Linux就该这么学
16分钟前
0
0
springmvc源码解析之@EnableWebMvc五

说在前面 本次主要介绍springmvc配置解析。关注“天河聊架构”微信公众号有更多精彩。 springmvc配置解析 @EnableWebMvc这个注解干了什么,初始化HandlerExceptionResolver 进入到这个方法o...

天河2018
17分钟前
1
0
开源 java CMS - FreeCMS2.8 数据对象 user

项目地址:http://www.freeteam.cn/ user 在使用用户相关标签时,标签会封装user供页面调用。 属性 说明 id id ismail 是否接收互动信件 name 名称 unitNames 所属单位名称,多个之间用;号分...

freeteam
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部