这次给您介绍如何操作js实现二级菜单并点击以显示当前内容，操作js实现二级菜单并点击以显示当前内容的注意事项。 以下是实战案例。 一起看看吧。
最近制作了二次菜单的点击活动的效果。 有三个初级菜单，次级菜单是固定的。 此外，html布局不是父子关系。 请具体看效果图
html结构向下
你好！ 日期滚动今天比赛早盘更改密码恢复账号历史|交易情况足球|篮球/美式足球|网球|排球|羽毛球|乒乓球|棒球|斯诺克/台球|其他根据您的页面需求自行设计
接下来是重要的内容js
功能全部game
var lis=document.queryselectorall (.Li _ list )； //取得三大播放按钮
vara _ list=document.getelementsbyclassname (a _ list )； //获得三大赛
var ball=document.getelementsbyclassname (' ball )； //获得球类比赛
for(varI=0； I
lis[i].index=i； //获得三大玩法的下标
lis[i].onclick=function () /第1级菜单上的单击事件
for(varI=0； I
lis[i].className=' '；
A_list[i].style.display='none '；
}
this.className='checked '；
a _ list [ this.index ].style.display=' block '； //for用排他思想显示当前点击的选项
var x=this.index； //点：在最初点击时获取的下标中保存1个变量x
vara _ list=document.getelementsbyclassname (a _ list ) [x]； //用下标获取A_list[x]
varaa _ list=a _ list.getelementsbytagname (' p )； //在前一步骤中获取相应的子类p
for(varj=0； Jj
ball[j].indexa=j；
ball[j].onclick=function () /同样遍历相同的排他思想
for(vara=0； a
aa_list[a].style.display='none '； //隐藏所有p
}
a _ list [ this.indexa ].style.display=' block '； //当前显示
}
}
}
}
}
allGame (；
看了这篇报道的事例，我相信你掌握了方法。 更棒。 请注意php教程中的其他相关文章。
请阅读：
如何使用Vue组件
如何使用vue弹窗消息组件