http://jqueryui.com/demos/accordion/里面的例子，下图红框所示的内容都是在html页面上写死的，如果想动态显示menu的内容该怎么办呢，下面就简单介绍下：
首先就是下在jueryui，这里就不介绍了。
思路：
页面加载完成后，通过ajax向后台获取第一层的menu的数据，并将其显示在页面上，同时为每一个menu绑定一个onclick事件，然后触发accordion事件；这样第一层menu实现，与在页面写死menu实现的效果一样。然后在点击第一层menu的时候，会触发刚才绑定click事件，通过传递参数获得该menu的子menu。
?
代码：
js代码：
<script>
$(function() {
$.ajax({
url:"http://localhost:8080/process/Category",
dataType:"xml",
success:function(data){
$(data).find("Category").each(function(index){
var p_name = $(this).children("name").text();
$("#accordion").append("<h3><a href='#' onclick=ck('"+p_name+"')>"+p_name+"</a></h3><div id='"+p_name+"'></div>");
});
$( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
}
});
});
function ck(p_name){
$.ajax({
url:"http://localhost:8080/process/Process",
dataType:"xml",
data:p_name,
success:function(data){
$(data).find("ProcessDefinitionUUID").each(function(index){
var name = $(this).children("value").text();
$("#"+p_name).append("<ul><li><a >"+name+"</a></li></ul>");
});
}
});
}</script>
<body>
<div id="accordion"></div>
</body>
上面代码的红色部分原来是放在ajax的上面的，这样的效果如下图所示：
这与实际需求不一致。
所以将其放在ajax的success中去了，这样在加载完后台数据成功后，会触发jqueryui accordion。
实现效果如下图所示：
ok，完工。
博客地址：jiangli.easymorse.com