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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
JS按钮闪烁功能的实现代码
Jul 21 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
详解webpack 入门与解析
Apr 09 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
python 判断自定义对象类型
2009/03/21 Python
python 调用HBase的简单实例
2016/12/18 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
医院办公室主任职责
2013/12/29 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
评职称个人总结
2015/03/05 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书