1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>jQuery:slideToggle控制模块的展开与收缩功能 </title>
6
7 <script type="text/javascript" src="jquery-1.3.2.js"></script>
8
9 <script type="text/javascript">
10 $(function(){
11 $("#head").click(function (){
12 $("#content").slideToggle("slow",function(){
13 alert("测试成功！")
14 })
15 })
16 })
17 </script>
18
19
20 <style type="text/css">
21 p,div{margin:0;padding:0;} /*设置p,div之间的间距*/
22 #head{width:90%;background:#ddd;height:20px;border-top:1px solid #aaa;border-right:1px solid #aaa;border-left:1px solid #aaa;}
23 #content{width:90%;background:#adf;height:500px;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;margin-top:0px;}
24 </style>
25
26
27 </head>
28 <body>
29 <p id="head">单击这里测试(一个收缩展开功能)</p>
30 <div id="content">
31 <pre>
32 1,首先引用jQuery.
33 2,然后开始写函数了。$(document).ready(function(){});
34 3,前面说过了，获取标签能直接 $("标签")。给标签注册 onclick事件直接可以 click.
35 4,核心代码:
36 $("head").click(function(){$("content").slideToggle("slow");});
37 5,slideToggle(speed, callback)
38 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
39 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
40
41 返回值
42 jQuery
43
44 参数
45 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
46 callback (Function): (可选) 在动画完成时执行的函数
47 示例
48 jQuery 代码:
49 $("p").slideToggle("slow");
50
51 --------------------------------------------------------------------------------
52
53 jQuery 代码:
54 $("p").slideToggle("slow",function(){ alert("Animation Done."); });
55 </pre>
56 </body>
57 </html>
58
59