利用jQuery动态控制列表内容展开与收缩的原理是：通过jQuery的滑动效果函数将原本隐藏的列表内容滑动显示或者将原本显示的列表内容滑动隐藏。其中使用到的jQuery的函数有：ready()、hover()、toggle()、slideDown()、slideUp()函数。
1．jQuery函数介绍
（1）jQuery的toggle()函数--事件切换
该函数每次单击后依次调用函数。其语法形式如下：
- toggle(fn1,fn2,[fn3,fun4,…])
注：如果单击了一个匹配的元素，则触发指定的第一个函数。当再次单击同一元素时，则触发指定的第二个函数。如果有更多函数，则再次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。可以使用unbind("click")来删除。fn1，第一次单击要执行的函数；fn2，第二次单击要执行的函数；fn3、fn4等都是可选参数，表示更多次单击要调用的函数。
（2）jQuery的slideDown()函数--向下滑动
该函数通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。其语法形式如下：
- slideDown(speed,[callback])
注：这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式显示出来。speed，三种预定速度之一的字符串（"slow"，"normal"or "fast"）或表示动画时长的毫秒数值（如1000）；function是在动画完成时执行的函数。
（3）jQuery的slideUp()函数--向上滑动
该函数通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。其语法形式如下：
- slideUp(speed,[callback])
注：这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏起来。speed，三种预定速度之一的字符串（"slow"，"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；function是在动画完成时执行的函数。
2．功能实现
实现列表内容展开与收缩的步骤如下。
（1）选定需要动态触发隐藏与显示列表内容的事件，hover()事件或者toggle()事件。
（2）在事件中编写隐藏与显示的具体动作，并设置动作持续时间。
首先，把jQuery库引入进来：
- <script language="JavaScript" src="jslib/jquery-1.6.js"></script>
然后，添加完整代码：
- 1 <script language="JavaScript" type="text/JavaScript">
- 2 $(document).ready(function(){
- 3 $(".menu").hover( //鼠标悬停与离开事件
- 4 function(){
- 5 $(".content").slideDown(800); // 展开
- 6 },function(){
- 7 $(".content").slideUp(1000) // 收缩
- 8 });
- 9 })
- 10 </script>
上面这段代码设定了鼠标覆盖事件，也可以使用鼠标单击事件。
- 1 <script language="JavaScript" type="text/JavaScript">
- 2 $(document).ready(function(){
- 3 $(".menu").toggle( //鼠标单击事件
- 4 function(){
- 5 $(".content").slideDown(800); // 展开
- 6 },function(){
- 7 $(".content").slideUp(1000) // 收缩
- 8 });
- 9 })
- 10 </script>
上述两段代码只是在事件的使用上有所不同。在这里还要注意一点，当加入jQuery代码后，在CSS样式设定中需要把原来的列表显示状态改成隐藏状态，即：
- .menu ul{display:block;background:#fefefe;
- border:1px solid #ddd;width: 300px;padding:
- 5px;margin:0px;}
当页面加载完毕时，效果如图4.9所示。
 |
| 图4.9 页面加载完毕隐藏列表 |
