JQuery第一弹：accordion菜单详解

PS:
1.需要用户有点Jquery核心插件的基础
2.所有讲解都不包含CSS样式，只说动态效果，样式根据自己实际情况修改
一.导入Jquery核心插件
二.导入与accordion菜单相关的UI插件（ui.core.js，ui.accordion.js），
或直接导入jquery-ui-1.7.2.custom.min.js(不建议，会导致页面加载时多出没必要的插件加载)
三.用html标签定义accordion菜单（分静态和动态）：

1.静态菜单：
首先是最外层div，相当于是放accordion菜单的容器,
<div id="accordion">
</div>
然后是里面的每个accordion菜单项,其中每个项分为标题项和内容项,
<div id="accordion">

<div id="accordionTitle">title(这里放标题)</div>
<div id="accordionContent">content(这里放内容)</div>

</div>
这样就做成了只有一个菜单项的accordion菜单，若有多个菜单，重复即可，如:
<div id="accordion">

<div id="accordionTitle1">title(这里放标题)</div>
<div id="accordionContent1">
<p>内容1</p>
<p>内容2</p>
</div>

<div id="accordionTitle2">title(这里放标题)</div>
<div id="accordionContent2">
<p>内容1</p>
<p>内容2</p>
</div>

</div>

2.动态生成菜单
同样首先定义最外层div，相当于是放accordion菜单的容器,
<div id="accordion">
</div>
然后通过异步获取数据，并返回结果，达到动态生成效果，具体步骤如下：
①在script标签中定义异步调用的方法:
<script>
function getAccordionAsync()
{
$.ajax({
//提交的方法
type:"post",
//要去获取数据的页面，自己根据实际情况而定，可以是asp,jsp,httphandler(一般处理程序)，servlet
url:"doAccordion.aspx",
//获取数据成功后将得到的数据作为id为accordion的div的内容
success:function(result)
{
$("#accordion").html(result);
}
});
}
</script>
②新建一个页面，用来生成accordion菜单的所有内容，这里以asp页面为例子：
在后台代码的load事件中添加如下类似代码：
protected void Page_Load(object sender, EventArgs e)
{
//这里以常用的菜单形式，即某用户有多个父菜单，每个父菜单下有多个子权限，且只有两级菜单举例
//获取当前用户
UserInfo LoginUser = Session["LoginUser"] as UserInfo;
//获取当前用户所有菜单

List<RoleRight> roleRights = RoleRightManager.GetRoleRightsByRoleId(LoginUser.Role.Id);
//要返回的内容
Literal lt = new Literal();
//遍历所有菜单
foreach (RoleRight roleRight in roleRights)
{
//获取父级菜单
if (roleRight.Node.ParentNodeId == 0)
{
string content = "";
//设置标题内容
string head = roleRight.Node.DisplayName;
//获取当前父菜单下的子菜单
foreach (RoleRight rr in roleRights)
{
if (rr.Node.ParentNodeId == roleRight.Node.Id)
{
//设置子菜单要显示的内容及点击时要跳转到的页面
content += "<div class='accrodionContent'><a target='mainFrame' href='" + rr.Node.NodeURL + "'>" + rr.Node.DisplayName + "</a></div>";
}
}
//每遍历出一个父菜单及其下所有子菜单，就追加到lt.Text上，形成一个字符串格式的内容
lt.Text += "<div class='accrodionHead'>" + head + "</div><div>" + content + "</div>";
}
}
//最后将拼接好的字符串返回，这里的返回的lt.Text就是上面getAccordionAsync方法中成功后得到的数据result
Response.Write(lt.Text);



四.生成accordion菜单后，在页面首次加载时调用accordion方法，使之能够滑动
有以下几种动态样式：
1.$("#accordion").accordion();默认样式
2.$("#accordion").accordion({
autoHeight: false
});
菜单项是否使用相同高度，false为自动适应内容高度,true为所有菜单高度相同，一般使用false
3.$("#accordion").accordion({
event: "mouseover"
});
鼠标移上时触发滑动效果
以上三个位常用的效果，其他还有一些可以参考demo里的方法