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里的方法
<!DOCTYPE html><html><head> <link type=”text/css” href=”http:///latest/themes/base/ui.all.css” rel=”stylesheet” /> <script type=”text/javascript” src=”http:///latest/jquery-1.3.2.js”></script> <script type=”text/javascript” src=”http:///latest/ui/ui.core.js”></script> <script type=”text/javascript” src=”http:///latest/ui/ui.accordion.js”></script>
<script language=”javascript”>
$(function(){
//Accordion 先设定属性，标题头就是h3，默认选项是第二个，默认选项是从0开始的，icons是设置图标的，下面有详细讲解
“#accordion”).accordion({header:”h3″,active:1,event:”mouseover”,icons: { ‘header’: ‘ui-icon-plus’, ‘headerSelected’: ‘ui-icon-minus’};
$(‘#accordion’).bind(‘accordionchange’, function(event, ui) {
alert($(ui.newHeader).html());
});//这里绑定了一个change事件，下面有详解，注意：在这里绑定change必须用“accordionchange”.
</script>
<style type=”text/css”>
body{font:62.5% “宋体”,”Trebuchet MS”,sans-serif;margin:50px;}
.demoHeaders{margin-top:2em;}
#container1{
width:200px;
}
</style>
</head>
<body>
<div id=”container1″>
<!–Accordion–>
<h2>Accordion</h2>
<div id=”accordion”>
<div >
<h3 id=1><a href=”#”>WEB开发笔记</a></h3>
<div>www.。</div>
</div>
<div >
<h3 id=2><a href=”#”>WEB开发笔记贰</a></h3>
<div>www.？</div>
</div>
<div >
<h3 id=3><a href=”#”>WEB开发笔记叁</a></h3>
<div>www.。</div>
</div>
</div>
</div>
</body>
</html>
看完例子，大家来看看手风琴的详细参数吧。哈哈~~哈哈~~哈哈，又出现了一次。
要使用这个插件ui.core.js和ui.accordion.js这两个js文件是必不可少的，当然jquery文件也是必须的，好像是废话哦。
1 选项：
1.1 active 这个参数是设置默认选项的，默认情况下是0，也就是第一个哦。哈哈。
初始化设置例：$(‘#accordion’).accordion({ active: 2 });
在初始化之后的获取和设置例：
//获取 var active = $(‘#accordion’).accordion(‘option’, ‘active’);
//设置 $(‘#accordion’).accordion(‘option’, ‘active’, 2);
1.2 animated 这个参数是设置动画效果 默认选项是‘slide’
可以设置你喜欢的动画效果，或不使用动画效果（设置false），除了默认设置，使用’bounceslide’和’easeslide’需要UI Effects Core 。。。嘿嘿。。。
初始化设置例： $(‘#accordion’).accordion({ animated: ‘easeslide’ });
在初始化之后的获取和设置例：
//获取
var animated = $(‘#accordion’).accordion(‘option’, ‘animated’);
//设置
$(‘#accordion’).accordion(‘option’, ‘animated’, ‘easeslide’);
1.3 autoHeight 默认是true，如果设置，所有内容部分的高被设定为其中最高内容的高。 初始化设置：$('#accordion').accordion({ autoHeight: false })；
初始化以后的获取或设置
//获取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//设置
$('#accordion').accordion('option', 'autoHeight', false);
1.4 clearStyle 默认是false，似乎是清除style，哈哈~~~
初始化设置 $('#accordion').accordion({ clearStyle: true });
初始化后的获取和设置和上面的差不多。。。省略。。。
1.5 event 默认是'click' 如何展开选项。可以设置长双击、鼠标滑过等。。。
初始化设置例：$('#accordion').accordion(event:"mouseover")；
初始化后的设置请参考上面的 ，此处省略。。。
1.6 fillSpace ，充满父元素的高，默认为false ，使用此项,autoHeight无效。
初始化设置例：$('#accordion').accordion({ fillSpace: true });
初始化后的获取和设置请参考上面的 ，此处省略。。。
1.7 header，设置头元素（见上面实例)，默认值为：'> li > :first-child,> :not(li):even'
此处省略，自己理解。。。
1.8 icon，设置小图标，默认值为： { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外，请看下面的英国字儿~~~只可意会不可言传。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller
初始化设置例：$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化后的获取和设置省略。。。
1.9 navigation 和navigationFilter暂时不知道到底是做什么用的，回头再说吧。。。
2 事件
2.1 change事件 accordion改变时触发的事件，有两种绑定方法
第一种：
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 对象, 激活 header
ui.oldHeader // jQuery 对象, 之前 header
ui.newContent // jQuery 对象, 激活 content
ui.oldContent // jQuery 对象, 之前 content
});这种方法在前面的例子中已经都有喽~~
第二种：
$('#accordion').accordion({
change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。
3 方法
3.1 destroy ：毁灭地球...
使用方法：.accordion( 'destroy' )
3.2 disable：accordion不可用，使之无效。
使用方法：.accordion('disable')
3.3 enable： 可用，使之有效，使用方法：略...
3.4 option：参数，使用方法：前面都已经用过了，例：.accordion( 'option' , optionName , [value] )
3.5 activate：也是设置默认选项，和参数active 作用一样。例：.accordion( 'activate' , index )
本文来源于WEB开发笔记 http://www. , 原文地址： http://www./web-note1810
附参考：
