js实现简单的手风琴效果

效果图：

图(1)初始图

图(2)点击展开效果

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style type=' text/CSS ' * { margin :0；划水：0;font-size :12 px列表式：无；}.菜单{ margin:50px auto宽度宽度：210pxborder:1px固体# ccc}。菜单p { height:25px线高：25 px背景技术# eee font-weight : bold；边框-底部：1px实心# ccctext-缩进：20 px光标：指针指针；}.菜单div ul { display:none}。菜单li { height:24px线高：24 px文本-缩进：20像素；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var menu=document。getelementbyid('菜单')；var PS=菜单。getelementsbytagname(' p ')；var uls=菜单。getelementsbytagname(' ul ')；用于(PS中的var(I){ PS[I].id=I；私人秘书.onclick=function(){ var u=uls[this。id]；if(u . style。display==' block '){ u . style。显示='无'；} else { u . style。display=' block} } } } }/脚本/头体div class=' menu ' id=' menu ' div pWeb前端/p ul style=' display : block ' LiJavaScript/Li LiDiv CSS/Li LiJ quary/Li/ul/div/p后台脚本/p ul LipHP/Li LiJSP/Li/ul/div/p前端框架/p ul Liextjs/Li liesspress/Li Li yi/Li/ul/div/div/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！