JQuery-动画。

在实际开发中，我们经常用到可折叠的菜单，自有了JQuery，这一工程变得非常之简单，甚至可以用一句话来完成。

下面先看效果图：

要实现这样一个功能，非常之简单：

我们先定义头部和细项的2个CSS:

<style type=”text/css”> .MasterPanel { background-color: Gray; border:1px solid gray; border-bottom:1px solid White; font-weight:bold; width:200px; color:White; line-height:30px; } .ItemPanel { background-color:White; border:1px solid gray; border-top:1px solid White; width:200px; } </style>

然后用DIV 布局一下菜单：

<div> <div > 人事组织 </div> <div > 基本资料 </div> <div > 合同管理 </div> <div > 离职管理 </div> </div> <div > <div > 薪资管理 </div> <div > 薪资计算 </div> <div > 薪资体系 </div> <div > 员工薪资调整 </div> </div> <div > <div > 招聘管理 </div> <div > 简历中心 </div> <div > 面试管理 </div> <div > 录用管理 </div> </div>

下面我们就用非常简单的JQuery 代码增加一些动画的效果；

<script src=”../Scripts/jquery-1.8.1.js” type=”text/javascript”></script> <script type=”text/javascript”> $(document).ready(function () { $(“.MasterPanel”).bind(“click”, function () { $(this).closest(“.Module”).find(“.ItemPanel”).toggle(“slow”); }); }); </script>

看看，非常简单吧，首先给所有的引用了类名为.MasterPanel的元素增加一个click事件。在Click事件中，找到与当前被单击的元素最近的并且引用了类名为.Module的元素，在这个元素上查找其子元素中引用了类名为ItemPanel的元素，在这些元素上使用toggle函数。

可以看到，其实最重要的就一句话$(this).closest(“.Module”).find(“.ItemPanel”).toggle(“slow”); ，这句话综合使用了JQuery强大的选择器和动画函数toggle.

toggle([speed],[easing],[fn]) 隐藏或显示元素，将隐藏的元素显示或将显示的元素隐藏。

speed: 可选，隐藏/显示 效果的速度。默认是 “0″毫秒。可能的值：slow，normal，fast。”

easing: 可选，用来指定切换效果，默认是”swing”，可用参数”linear”

fn: 可选，在动画完成时执行的函数，每个元素执行一次。

如果仅仅是这样，您肯定觉得还是不够的，我们再增加个更炫的效果，在子菜单隐藏的时候显示“+”，再子菜单显示的时候显示“-”:

要完成上面的效果也是非常之简单：

首先我们修改一下MasterPanel 样式：

.MasterPanel { background-color: Gray; border:1px solid gray; border-bottom:1px solid White; font-weight:bold; width:200px; color:White; line-height:30px; background-repeat:no-repeat; background-image:url(../images/Minus.gif); background-position:170px ; }

然后我们再增加一个当子菜单折叠的时候的样式：

.Plus{ background-repeat:no-repeat; background-image:url(../images/plus.gif); background-position:170px ; }

最后，我们将脚本也稍作修改：

$(document).ready(function () { $(“.MasterPanel”).bind(“click”, function () { $(this).closest(“.Module”).find(“.ItemPanel”).toggle(“slow”, function () { $(this).closest(“.Module”).find(“.MasterPanel”).toggleClass(“Plus”,$(this).is(“:hidden”)); }); }); });

这里使用了新的函数toggleClass。

http://blog.sina.com.cn/s/articlelist_1250934153_0_1.html