手机版

js实现简单的手风琴效果

时间:2021-09-06 来源:互联网 编辑:宝哥软件园 浏览:

效果图:

图(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以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

版权声明:js实现简单的手风琴效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。