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