基于jQuery代码的手风琴菜单的实现

首先让你看看地图的效果：
先看一下页面代码，列表的嵌套：
U3000 U3000
U3000 U3000 U3000 U3000
B
U3000 U3000 U3000 U3000 U3000 U3000
C
C
C
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
B
U3000 U3000 U3000 U3000 U3000 U3000
C
C
C
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
B
U3000 U3000 U3000 U3000 U3000 U3000
C
C
C
U3000 U3000 U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000
CSS代码主要设置子菜单的左边框的背景色和样式，设置暂停和选中的样式，并设置子菜单，不显示（在JS设置后单击并显示）。
# menudiv {
宽度：200px；
背景颜色：# 029fd4；
}
parentli。
{
宽度：100%；
行高：40px；
边距：1px；
背景：# 1c73ba；
颜色：# FFF；
光标：指针；
字体重量：加粗；
}
parentli跨度。
{
填料：10px；
}
。parentli：悬停、SelectedParentMenu。
{
背景：# 0033cc；
}
childrenul。
{
背景颜色：# ffffff；
显示：无；
}
childrenli。
{
宽度：100%；
行高：30px；
字体大小：。9em；
边距：1px；
背景：# 63b8ff；
颜色：# 000000；
左：15px填充；
光标：指针；
}
。childrenli：悬停、SelectedChildrenMenu。
{
Border-left: 5px #0033CC solid;
背景：# 0099cc；
左：15px填充；
}
接下来是单击事件的代码：
$（。parentli）。Click（函数（事件）{
$(this).Children ('.childrenUl').SlideToggle ();
}）；
$（。childrenli）。Click（函数（事件）{
event.stoppropagation（）；
$（。childrenli ）RemoveClass（'selectedchildrenmenu）；
$（。parentli ）RemoveClass（'selectedparentmenu）；
$（这）。父母（。parentli ）AddClass（'selectedparentmenu）；
$（这）AddClass（'selectedchildrenmenu）；
}）；
值得注意的是该列表的嵌套，使事件的泡沫，所以在子菜单点击事件组织气泡，event.stoppropagation（）；

代码很简单，代码是注释，实现了jQuery的手风琴菜单，请参考需要的朋友。