使用jQuery UI的Accordion做菜单。

最近有个项目临时变换了页面，需要一个手风琴的菜单，于是决定使用Accordion来做菜单。

<div id="nav" ><h3><a href="#">系统管理</a></h3>    <div>    <ul><li><a href="${base}/system/system/member">学生管理</a></li><li><a href="${base}/system/system/user">权限管理</a></li></ul>    </div>    <h3><a href="#">新闻</a></h3>    <div>    <ul><li><a href="${base}/system/campus/bulletin">公告管理</a></li><li><a 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);}});