二级/三级菜单栏JS控制（含取消冒泡行为）

在做页面的时候，经常会涉及到二级菜单和三级菜单的制作，这篇文章就介绍一下具体的操作方法：
首先看页面把结构搭成如图所示：
首先是一级菜单的点击事件：

// 通过修改类名的方法改变需要显示或隐藏的内容
    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()
      }