原生JS实现N级菜单的代码

需求分析

简单的分析一下，要实现N级菜单，首先从布局入手，即判断是否有下级菜单

1.没有下一级菜单,直接排列

2.有下级菜单，又分为下级菜单排放位置，和在上级菜单显示类似 '>' 的符号，效果如图:

图：1

 初步实现

1.实现是否存在   >

注意： 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式，来表达思路。

ＨＴＭＬ结构如下：

图：2

•要实现图一的效果，我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移除'

2.下级菜单出现位置

ＨＴＭＬ结构如下：

•实现这一需求，也需要判断children.length===2 ? '上级菜单相对定位, top为0，left为上级的offsetWidth，下级菜单绝对定位' : '不做任何处理'

具体代码即实现

效果图如下：

代码如下：

  
  
  
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      margin: 200px 0 0 50px;
      text-align: center;
      color: #ccc;
    }
    ul {
      list-style: none;
      float: left;
    }
    li {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background-color: #124520;
      border: 1px solid #eee;
      position: relative;
    }
    li span {
      position: absolute;
      top: 0;
      right: 10px;
    }
    li:hover {
      background-color: #666;
      transition: background-color .5s;
    }
    ul {
      display: none;
    }
    ul.first {
      display: block;
    }
    .relative {
      position:relative;
      top: 0;
      left: 0;
    }
    .absolute {
      position: absolute;
      left: 0;
      top: 0;
    }
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  


  
    

      
一级菜单
 >
      
      
一级菜单
 >
 

   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
   
二级菜单
     >
   
   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
 
      
      
一级菜单
 >
 

   
二级菜单
     >
   
   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
   
二级菜单
     >
     

三级菜单
  >

三级菜单
  >

三级菜单
  >

三级菜单
  >

     
   
 
      
      
一级菜单
 >
      
    
  

以上所述是小编给大家介绍的原生JS实现N级菜单的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！