JS实现多级菜单栏的代码示例

需求分析

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

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

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

图：1

初步实现

1.实现是否存在 >

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

ＨＴＭＬ结构如下：

图：2

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

2.下级菜单出现位置

ＨＴＭＬ结构如下：

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

具体代码即实现

效果图如下：

代码如下：

【相关推荐】

1. Javacript免费视频教程

2. JS制作QQ聊天消息展示和评论提交功能的代码示例

3. 单行 JS 实现移动端金钱格式检验

4. JavaScript表单验证实现代码_javascript技巧

5. Nodejs中常用中间件body-parser的实例详解