本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。具体代码如下
!doctype html html lang=' en ' head meta charset=' UTF-8 ' title document/title style type=' text/CSS ' * { margin :0;划水:0;font-size :13 px列表式:无;}.菜单{ width :210 pxmargin :50 px汽车;border:1px固体# ccc}。菜单p { height:25px线高:25 px字体粗细:加粗;背景技术# eeeborder-bottom:1px实心# ccccursor:pointer指针指针;左衬垫:5 px}.菜单div ul { display:none}。菜单li { height:24px线高:24 px左衬垫:5 px}/样式脚本类型=' text/JavaScript '窗口。onload=function(){//将所有点击的标题和要显示隐藏的列表取出来var PS=文档。getelementsbytagname(' p ');var uls=文档。getelementsbytagname(' ul ');//遍历所有要点击的标题且给它们添加索引及绑定事件for(var i=0,n=ps.lengthI ni=1){ ps[i].id=I;私人秘书.onclick=function(){ for(var j=0;j n;j=1){ uls[j]。风格。display=无;} uls[这个。id]。风格。display=' block} //获取点击的标题上的索引属性,根据该索引找到对应的列表} //判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来}/script/head body div class=' menu ' id=' menu ' div pWeb前端/p ul style=' display : block ' LiJavaScript/Li LiDiv CSS/Li LiJ查询/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实例效果:
以上就是为大家分享的爪哇岛描述语言伸缩菜单栏实现代码,希望对大家的学习有所帮助。