Jq制作的手风琴导航菜单，分为2级，动态切换。制作和使用都比较简单，如果有需求的朋友可以直接拿去使用。

HTML

菜单1子菜单1子菜单2子菜单3子菜单4子菜单5菜单2子菜单1子菜单2子菜单3子菜单4子菜单5菜单3子菜单1子菜单2子菜单3子菜单4子菜单5菜单4子菜单1子菜单2子菜单3子菜单4子菜单5菜单5子菜单1子菜单2子菜单3子菜单4子菜单5菜单6子菜单1子菜单2子菜单3子菜单4子菜单5

CSS

#AccordionBody {
	width: 300px;
	height: 400px;
	margin: 0 auto;
	margin-top: 100px;
}
.MenuItem {
	width: 100%;
	padding: 12px 0 12px 0;
	border: 1px solid #ccc;
	text-align: center;
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	color: #333;
	background-color: #fff;
	margin-top: -1px;
	cursor: pointer;
}
.MenuItem:hover {
	background-color: #f6f5ec;
}
.MenuItemFrist {
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.MenuItemLast {
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}
.MenuChild {
	width: 100%;
	background-color: #4b2f3d;
	overflow: hidden;
	height: 0px;
}
.MenuChildItem {
	width: 100%;
	padding: 12px 0 12px 0;
	text-align: center;
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	color: #333;
	border-bottom: 1px solid #74787c;
	color: #fff;
	margin-top: -1px;
	cursor: pointer;
}
.MenuChildItem:hover {
	background-color: #63434f;
}

Jq

$(function(){
	$(".MenuItem").click(function(){
		var target=$(this);
			$(".MenuItem:last").css({
				"-webkit-border-radius":" 0 0 5px 5px",
		        "-moz-border-radius":" 0 0 5px 5px",
			    "border-radius":" 0 0 5px 5px"
			 });
		$(".MenuChild").stop().animate({height:"0px"},100,function(){
			if($(target).attr("class").indexOf("MenuItemLast")!=-1){
			$(target).css({
				"-webkit-border-radius":"0 0 0 0",
		        "-moz-border-radius":"0 0 0 0",
			    "border-radius":"0 0 0 0"
			 });
		     }
			$(target).next().stop().animate({height:"220px"},200);
		});
	});
});