jQuery 学习6 操纵元素显示效果的函数


Posted in Javascript onFebruary 07, 2010
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Collapsible List — Take 1</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('li:has(ul)') 
.click(function(event){ 
if (this == event.target) { 
if ($(this).children().is(':hidden')) { 
$(this) 
.css('list-style-image','url(minus.gif)') 
.children().show(); 
} 
else { 
$(this) 
.css('list-style-image','url(plus.gif)') 
.children().hide(); 
} 
} 
return false; 
}) 
.css('cursor','pointer') 
.click(); 
$('li:not(:has(ul))').css({ 
cursor: 'default', 
'list-style-image':'none' 
}); 
}); 
</script> 
<style> 
fieldset { width: 320px } 
</style> 
</head> 
<body> 
<fieldset> 
<legend>Collapsible List — Take 1</legend> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Item 3.1</li> 
<li> 
Item 3.2 
<ul> 
<li>Item 3.2.1</li> 
<li>Item 3.2.2</li> 
<li>Item 3.2.3</li> 
</ul> 
</li> 
<li>Item 3.3</li> 
</ul> 
</li> 
<li> 
Item 4 
<ul> 
<li>Item 4.1</li> 
<li> 
Item 4.2 
<ul> 
<li>Item 4.2.1</li> 
<li>Item 4.2.2</li> 
</ul> 
</li> 
</ul> 
</li> 
<li>Item 5</li> 
</ul> 
</fieldset> 
</body> 
</html>

上面实现列表的折叠已经很简单了,但jQuery提供了一个切换元素状态的函数toggle()。将上面红色字体的代码改为下面的代码,同样可以实现上述功能:
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
以上三个函数show()、hide()、toggle()在带参数的情况下可以实现元素逐渐的显示和隐藏
hide(speed,callback)
show(speed,callback)
toggle(speed,callback)
speed:可为数字或字符串,把效果的持续时间(可选)指定为毫秒数或预定义的字符串之一:slow、normal或fast。如果省略,就不产生动画并立即在显示屏上显示元素。
callback:回调函数(可选),在动画完成时调用。没有参数传递给这个函数,但函数上下文(this)被设置为以动画隐藏的元素。

动画效果的可折叠列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Collapsible List — Take 3</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('li:has(ul)') 
.click(function(event){ 
if (this == event.target) { 
$(this).css('list-style-image', 
(!$(this).children().is(':hidden')) ? 
'url(plus.gif)' : 'url(minus.gif)'); 
$(this).children().toggle('slow'); 
} 
return false; 
}) 
.css({cursor:'pointer', 
'list-style-image':'url(plus.gif)'}) 
.children().hide(); 
$('li:not(:has(ul))').css({ 
cursor: 'default', 
'list-style-image':'none' 
}); 
}); 
</script> 
<style> 
fieldset { width: 320px } 
</style> 
</head> 
<body> 
<fieldset> 
<legend>Collapsible List — Take 3</legend> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li> 
Item 3 
<ul> 
<li>Item 3.1</li> 
<li> 
Item 3.2 
<ul> 
<li>Item 3.2.1</li> 
<li>Item 3.2.2</li> 
<li>Item 3.2.3</li> 
</ul> 
</li> 
<li>Item 3.3</li> 
</ul> 
</li> 
<li> 
Item 4 
<ul> 
<li>Item 4.1</li> 
<li> 
Item 4.2 
<ul> 
<li>Item 4.2.1</li> 
<li>Item 4.2.2</li> 
</ul> 
</li> 
</ul> 
</li> 
<li>Item 5</li> 
</ul> 
</fieldset> 
</body> 
</html>
Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
JS字符串处理实例代码
Aug 05 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
jQuery学习5 jQuery事件模型
Feb 07 #Javascript
jQuery学习4 浏览器的事件模型
Feb 07 #Javascript
jQuery学习3:操作元素属性和特性
Feb 07 #Javascript
jQuery学习2 选择器的使用说明
Feb 07 #Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python编程实现的图片识别功能示例
2017/08/03 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
用python写爬虫简单吗
2020/07/28 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
应届毕业生求职信范例分享
2013/12/17 职场文书
自我评价格式
2014/01/06 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android