使用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 header
					this.active = header;
				} else {
					// anchor within content
					this.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);
	}
});