原生射流研究…做的手风琴效果的导航菜单

做好的手风琴效果如下，具体看代码

超文本标记语言代码复制代码代码如下：doctype html html head meta charset=' utf-8 ' title手风琴/标题样式#手风琴{ width:200px} #手风琴ul {列表式：无；display:none}。一级{背景色： # d8d 8d 8；背景-color: rgba(236，208，208，0.53)；边界半径： 4px显示器：块；光标：指针；相对位置：余量margin: 2px 0 0 0padding: 8px最小高度： 0;}/style/head body div id=' accordinal ' div H3 class='一级一级/h3 ul第一项/li Li第二个项目/Li/ul/div class='一级一级/H3 ul Li第一项/Li Li第二个项目/李莉第三个项目/Li/ul/div class='一级一级/H3 ul Li第一项/Li第二个项目/李莉第三个项目/li /ul /div /div脚本src=' http 33366一级');函数点击标题(事件){ var target=EventUtil.getTarget(事件);togglesplay(目标。parentnode。query selector(' ul ')；} for(var I=0；iheads . LengTii){ event util。addhandler(heads[I]，' click '，head click)；}窗口。onunload=function(){ for(var I=0；iheads . LengTii){ event util。移除处理器(头[I]，‘咔嗒’，头咔嗒)；} heads=null} common.js文件复制代码代码如下： var事件util={ addHandler :函数(元素，类型，Handler){ if(元素。addevent listener){元素。addevent侦听器(类型，处理程序，false)；} else if(元素。attachevent){元素。attachevent(' on '类型，处理程序);} else { element[' on ' type]=handler；} }，removeHandler :函数（元素，类型，处理程序){ if(元素。removeeventlistener){元素。removeeventlistener(类型，处理程序，假)；} else if(元素。独立通风口){元素。独立通风口(' on '类型，处理程序);} else { type]上的元素['为null} }，getEvent :函数（事件){返回事件| | window.event}，getTarget :函数（事件){返回事件。目标| |事件。加速；} } var getStyle=function (el，style){ if(El。currentstyle){ style=style。替换(/\-(\ w)/g，函数(all，letter){ return letter。touppercase()；});定义变量值=El。current style[style]；返回值；} else {返回文档。默认视图。getcomputed style(El，null).getPropertyValue(样式);} } var toggle display=function(element){ var display=getStyle(element，‘display’)；if(display==' none '){ element。风格。display=' block} else { element。风格。显示='无'；} }