本文主要是介绍使用jQuery UI的Accordion做菜单。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近有个项目临时变换了页面，需要一个手风琴的菜单，于是决定使用Accordion来做菜单。
<div id="nav" ><h3><a href="#">系统管理</a></h3><div><ul><li><a class="ui-corner-all" href="${base}/system/system/member">学生管理</a></li><li><a class="ui-corner-all" href="${base}/system/system/user">权限管理</a></li></ul></div><h3><a href="#">新闻</a></h3><div><ul><li><a class="ui-corner-all" href="${base}/system/campus/bulletin">公告管理</a></li><li><a class="ui-corner-all" href="${base}/system/campus/part">版块(专题)划分</a></li></ul></div>
</div>
虽然使用navigation可以打开对象的标签页，但是不能给对应的a标签添加状态，于是作以下修改。
打开jquery.ui.accordion.js。
options中添加
navigationFunction:function(a){}
找到第67行这句
this.active = current.closest(".ui-accordion-content").prev();
在他后边添加
o.navigationFunction(current);
最后是这个样子的：
if ( o.navigation ) {var current = this.element.find("a").filter(o.navigationFilter);if ( current.length ) {var header = current.closest(".ui-accordion-header");if ( header.length ) {// anchor within headerthis.active = header;} else {// anchor within contentthis.active = current.closest(".ui-accordion-content").prev();o.navigationFunction(current);//新添加的一行}}}
然后在初始化的时候指定navigationFunction就可以了。
$("#nav").accordion({navigation: true,icons:{header: "ui-icon-circle-arrow-e",headerSelected: "ui-icon-circle-arrow-s"},navigationFunction:function(a){$('<span/>').addClass('ui-icon ui-icon-triangle-1-e').insertBefore(a);}
});
这篇关于使用jQuery UI的Accordion做菜单。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
