简明现代魔法 -> JQuery -> JQuery 学习:展开与收起HTML元素内容

JQuery 学习:展开与收起HTML元素内容

2010-05-01

程序演示如下:

单击这里测试(一个收缩展开功能)


点一下我就会收起了。

code

$(document).ready(function(){
	$(".title").click(function(){
		$(".nowamagic").slideToggle("slow",function(){ });
	});
}); 

如何实现?

  1. 首先把JQuery导入。
  2. 然后开始写函数了。$(document).ready(function(){});
  3. 前面说过了,获取标签能直接 $("标签")。给标签注册 onclick事件直接可以 click。
  4. 核心代码:$("head").click(function(){$("content").slideToggle("slow");});
  5. slideToggle(speed, callback) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

关于 slideToggle(speed, callback) 函数

返回值 jQuery,参数 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),callback (Function): (可选) 在动画完成时执行的函数。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们