jQuery toggle和slideToggle
丁良骏
jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。强大啊~
区别是：
toggle：动态效果为从右至左。横向动作。
slideToggle：动态效果从下至上。竖向动作。
so，比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。
此外，toggle和slideToggle 还有一些参数可以设置，具体看jQuery的API就可以了~
http://api.jquery.com/slideDown/
一个slideToggle的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dth">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<head>
<title>测试</title>
<script type="text/javascript">
<!--
function show(id){
$('#'+id).slideToggle("slow");
}
//-->
</script>
</head>
<body>
<div >
<ul>
<h2 οnclick="show('1')">栏目1</h2>
<div id="1">
<h3 οnclick="show('11')"> 栏目11</h3>
<div id="11">
<li> 栏目111</li>
<li οnclick="show('112')"> 栏目112</li>
<div id="112"> <p> 栏目1121</p>
<p> 栏目1122</p>
<p> 栏目1123</p>
<p> 栏目1124</p>
</div>
<li> 栏目113</li>
</div>
</div>
<h2 οnclick="show('2')">栏目2</h2>
<div id="2">
<h3> 栏目21</h3>
<h3 οnclick="show('22')"> 栏目22</h3>
<div id="22">
<li> 栏目221</li>
</div>
</div>
<h2 οnclick="show('3')">栏目3</h2>
<div id="3">
<h3> 栏目31</h3>
<h3> 栏目32</h3>
</div>
</ul>
</div>
</body>
</html>
类似资料：