JUERY UI ACCORDION动态添加MENU

最新推荐文章于 2022-06-10 18:45:19 发布

jiangi0373

最新推荐文章于 2022-06-10 18:45:19 发布

阅读量147

点赞数

文章标签： jqueryui

本文链接：https://blog.csdn.net/jiangi0373/article/details/84159539

版权

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='#' οnclick=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>