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
分享到：
相关推荐
- **API文档**：`jQuery_jQueryUI.chm`文件是jQuery UI的API参考，详尽地列出了每个组件的方法、属性和事件，是开发过程中不可或缺的参考资料。 **jQuery Easy-UI技术手册** jQuery Easy-UI 是基于jQuery和jQuery ...
jQuery UI的核心在于它的组件，这些组件是预先封装好的UI元素，如Accordion（手风琴）、Autocomplete（自动完成）、Button（按钮）、Calendar（日历，即日期选择器）、Dialog（对话框）、Draggable（可拖动）、...
这些壁纸可以通过jQuery UI的图像滑块（Slider）或下拉菜单（Selectmenu）选择，并通过JavaScript动态更换。 `images`文件夹则存放了项目所需的图标和其他图形资源。这些图片可能用于各种UI元素，如菜单、按钮、...
jQuery UI的核心是其组件系统，这些组件包括但不限于：`accordion`（手风琴）、`autocomplete`（自动完成）、`datepicker`（日期选择器）、`dialog`（对话框）、`draggable`（可拖动）、`droppable`（可放置）、`...
在这个项目中，`jquery.ui.accordion.js`就是实现accordion菜单功能的核心文件，它依赖于`jquery.ui.core.js`和`jquery.ui.widget.js`来提供基础的UI功能和组件构建模块。 `jquery-1.6.2.js`是jQuery库的版本1.6.2...
- **HTML标记**：在HTML中添加必要的类和属性，以启用jQuery UI组件。 - **JavaScript初始化**：通过JavaScript代码调用jQuery方法来实例化组件。 - **事件处理**：监听组件的交互事件，实现更复杂的业务逻辑。 ...
**jQuery UI 1.10 知识点详解** jQuery UI 是一个开源的 JavaScript 库，基于 jQuery，提供了丰富的用户界面组件和交互效果。在版本 1.10 中，这个库继续保持其作为Web开发的强大工具地位，为开发者提供了一系列...
4. **小部件（Widgets）**: 包括日历（Datepicker）、对话框（Dialog）、进度条（Progressbar）、滑块（Slider）、下拉选择器（Selectmenu）、可折叠面板（Accordion）、标签页（Tabs）等，这些都是常见的网页元素和...
5. **下拉菜单(Popup Menus)**：jQueryUI的Menu组件提供了一种创建多级下拉菜单的方式，适用于导航菜单或工具栏菜单。 6. **日期选择器(Datepicker)**：这是一个高度可定制的日历控件，可以方便地在网页上选择日期...
**jQuery UI** 是一个基于流行的JavaScript库jQuery的扩展框架，它提供了一系列的用户界面组件，如对话框、拖放功能、日期选择器、菜单、滑块等，用于创建交互式和美观的Web应用程序。这份中文帮助文档是官方文档的...
这个压缩包"jqueryUI包"包含了完整的 jQuery UI 库，允许开发者轻松地为网页添加各种交互元素，提升用户体验。 在 jQuery UI 中，主要包含以下组件： 1. **主题**: jQuery UI 提供了可定制的主题，允许开发者根据...
jQuery UI 是一个基于 jQuery 库的扩展框架，它提供了一系列可交互、可定制的界面组件，如日期选择器、对话框、拖放功能、进度条等。这个"最新jquery-ui"压缩包包含了构建用户界面所需的基本元素，适用于前端开发者...
3. **UI组件**: 提供了如对话框（Dialog）、日历（Datepicker）、进度条（Progressbar）、下拉菜单（Selectmenu）、滑块（Slider）、可折叠面板（Accordion）、tabs（选项卡）等常见UI元素，这些组件都封装了复杂的...
**jQuery UI** 是一个基于 **jQuery** 库的开源用户界面插件集合，它提供了多种可定制的组件和效果，帮助开发者快速构建交互式的网页应用。这个库深受前端开发者的欢迎，因为它简化了复杂的用户界面设计，使得创建...
在1.8.9版本中，jQuery UI 包含了两个预设的皮肤，使得开发者可以轻松地为他们的网页应用添加专业且吸引人的外观。 首先，我们来详细了解一下 jQuery UI 的核心功能和组件。jQuery UI 提供了一系列的可自定义的组件...
《jQuery UI 1.8.14：组件、示例与文档详解》 jQuery UI是jQuery库的一个扩展，提供了一套完整的用户界面组件，包括可交互的元素、效果、主题和文档，极大地丰富了Web开发的可能性。在"jquery-ui-1.8.14.zip"这个...
综上所述，"完整的jquery-ui-json"这个资源提供了构建交互式Web应用所需的一切，从UI组件到数据交换，开发者可以利用这些工具快速创建出具有专业水准的用户界面，并通过JSON数据进行动态交互。对于学习和实践Web前端...
**jQuery UI 1.9.0 - 最新稳定版本** jQuery UI 是一个强大的前端开发库，它是基于 jQuery JavaScript 库构建的，提供了丰富的用户界面组件和交互效果。jQuery UI 1.9.0 是该库的一个重要版本，具有高度稳定性和...
8. **小部件（Widgets）**：如菜单（Menu）、下拉选择（Selectmenu）、时间选择器（Timepicker）、自动完成（Autocomplete）等，这些都是常见但实现起来繁琐的组件，jQuery UI 提供了开箱即用的解决方案。...