手风琴的效果如下：具体代码：
HTML代码
复制代码代码如下所示：




手风琴

#手风琴{
宽度：200px；
}
#手风琴UL {
列表样式：无；
显示：无；
}
第一级{
背景颜色：# d8d8d8；
背景颜色：RGBA（236, 208, 208，0.53）；
边界半径：4px；
显示块；
光标：指针；
职位：相对；
2px保证金：000；
填料：8px；
最小高度：0；
}





一级

第一项
第二项
第三项目



一级

第一项
第二项
第三项目



一级

第一项
第二项
第三项目





VaR的头= document.queryselectorall（。第一级）；
功能headclick（事件）{
VaR目标= eventutil.gettarget（事件）；
ToggleDisplay（target.parentnode.queryselector（UL））；
}
对于（var i = 0；i < heads.length；i++）{
EventUtil.addHandler（头{我}，点击
}

window.onunload =函数（）{
对于（var i = 0；i < heads.length；i++）{
EventUtil.removeHandler（头{我}，点击
}
头=空；
}

common.js文件
复制代码代码如下所示：
无功eventutil = { {
AddHandler：功能（元素、类型、处理）{
如果（元。addEventListener）{
element.addeventlistener（类型、处理程序、错误）；
如果（元。attachevent）{ }
element.attachevent（+型，处理程序）；
{人}
元素+类型=处理程序；
}
}，
RemoveHandler：功能（元素、类型、处理）{
如果（元。removeEventListener）{
element.removeeventlistener（类型、处理程序、错误）；
如果（元。detachevent）{ }
element.detachevent（+型，处理程序）；
{人}
元素+类型} = null；
}
}，
GetEvent: function (event) {
返回事件window.event | |；
}，
gettarget：功能（事件）{
返回event.srcelement | | event.target；
}
}


无功getstyle =功能（EL，风格）{
如果（EL。currentstyle）{
style= style.replace（ / -（ W）/ g，功能（所有的信）{
返回letter.touppercase（）；
}）；
VaR值= EL。currentstyle {风格}；
返回值；
{人}
返回document.defaultview.getcomputedstyle（EL，null）GetPropertyValue（的风格）；
}
}


无功toggledisplay =功能（元）{
VaR = getstyle（元，显示）；
如果（显示= =）{
element.style.display =块；
{人}
element.style.display =没有；
}
}