在做页面的时候,经常会涉及到二级菜单和三级菜单的制作,这篇文章就介绍一下具体的操作方法:
首先看页面把结构搭成如图所示:
首先是一级菜单的点击事件:
// 通过修改类名的方法改变需要显示或隐藏的内容
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
if (this.children[2].className == 'yinC') {
for (var i = 0; i < lis.length; i++) {
lis[i].children[2].className = 'yinC'
lis[i].getElementsByTagName('span')[1].className = 'glyphicon glyphicon-menu-right'
}
this.children[2].className = 'open'
this.getElementsByTagName('span')[1].className = 'glyphicon glyphicon-menu-down'
} else if (this.children[2].className == 'open') {
this.children[2].className = 'yinC'
this.getElementsByTagName('span')[1].className = 'glyphicon glyphicon-menu-right'
}
}
}
后面是二级菜单和三级菜单的点击事件,但是涉及到冒泡行为,所以要阻止冒泡
// 二级菜单
// 设置节流阀
var flag = true
twoLi.onclick = function (event){
if(flag){
this.children[1].className = 'two_hidden'
flag = false
}else{
this.children[1].className = 'two_open'
flag = true
}
// 阻止冒泡
event.stopPropagation()
}
// 三级菜单
threeLi.onclick = function (event){
if(flag){
this.children[1].className = 'three_hidden'
flag = false
}else{
this.children[1].className = 'three_open'
flag = true
}
// 阻止冒泡
event.stopPropagation()
}