手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求。

  • 子类层级不确定,可根据数据自动生成多级菜单。
  • 操作便捷,只需传入一个HTML标签。
  缺点:
  • 需要满足特定的数据结构
  废话不多说,展示代码。先展示数据代码,注意,使用此封装函数需要满足此数据结构。
var data = [{
id: 1,
address: "安徽",
parent_id: 0
},
{
id: 2,
address: "江苏",
parent_id: 0
},
{
id: 3,
address: "合肥",
parent_id: 1
},
{
id: 4,
address: "庐阳区",
parent_id: 3
},
{
id: 5,
address: "大杨镇",
parent_id: 4
},
{
id: 6,
address: "南京",
parent_id: 2
},
{
id: 7,
address: "玄武区",
parent_id: 6
},
{
id: 8,
address: "梅园新村街道",
parent_id: 7
},
{
id: 9,
address: "上海",
parent_id: 0
},
{
id: 10,
address: "黄浦区",
parent_id: 9
},
{
id: 11,
address: "外滩",
parent_id: 10
},
{
id: 12,
address: "安庆",
parent_id: 1
}
];

  然后是HTML代码,提供一个DOM调用函数。

<div id="menu"></div>

  然后,就是我们封装的函数啦

  function ShowMenu(d) {
var root = document.querySelector(d); //获取DOM节点
var rootList = data.filter(rootItem => rootItem.parent_id == 0); //获取子元素数组
rootList.forEach(rootItem => { //循环子元素数组
var oDiv = document.createElement('div');
oDiv.setAttribute('data-id', rootItem.id);
oDiv.innerHTML = `${rootItem.address}`; function haschild(t) { //创建一个函数判断是否存在子元素
var child = data.filter(s => s.parent_id == t.dataset.id); //获取子元素数组
child.forEach(gs => { //循环子元素数组
var oUl = document.createElement('ul');
oUl.setAttribute('data-id', gs.id);
var oLi = document.createElement('li');
oLi.innerText = gs.address;
oUl.appendChild(oLi);
t.appendChild(oUl);
haschild(oUl); //再次调用函数,直到没有子元素存在
})
}
haschild(oDiv); //调用函数
root.appendChild(oDiv); //把所有的DOM放入传进来的DOM节点
})
}

  当当当当,又到了最振奋人心的时刻啦!调用函数。

结束,别看了老铁,没了

原生JS封装创建多级菜单函数的更多相关文章

  1. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

  2. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  5. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  6. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  7. 原生JS实现call,apply,bind函数

    1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...

  8. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  9. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

随机推荐

  1. python中剔除字典重复项,可以使用集合(set)。

    使用集合(set)剔除字典中的重复项(value). 1)具体例子: #甲乙丙丁使用的编程语言programming_languages = { '甲':'java', '乙':'python', ' ...

  2. Nginx(一)-windows下的安装配置

    第一步 下载 官网下载地址 因为只是测试这里选择最新版本1.13.9 下载完成得到zip压缩包 解压后得到如下目录 第二步  启动nginx 注意不要直接双击nginx.exe,这样会导致修改配置后重 ...

  3. 缓存机制 ehcache、redis

    本文主要记录ehcache和redis实现缓存(redis版本号:5.0.3) 一.ehcache 1.ehcache:用来管理Java中缓存的轻量级工具,其核心通过CacheManager使用,一般 ...

  4. oracle04 约束,索引

    约束(constraint)一.定义 为表的列添加一些约束,以满足用户的需求.在之后的DML(select,insert,update) 数据时,若不满足约束条件,则语句不能执行 注:可以为约束起别名 ...

  5. ADB——模拟手机按键输入

    基本命令 adb 模拟按键输入的命令主要通过 input 进行 Usage: input [<source>] <command> [<arg>...] The s ...

  6. 使用纳米 Protocol buffers 作为序列化数据

    使用纳米 Protocol buffers 作为序列化数据 Protocol Buffers 是 Google 公司开发的一种数据描述语言,类似于XML能够将结构化数据序列化. 但是它更小, 更快, ...

  7. tensorflow training result

  8. java的智能提示无法打开

    第一步:选中“window”->“preference”   第二步:选中“java”,并展开   第三步:选中“Editor”,并展开   第四步:选中“Content Assist”,在右侧 ...

  9. CentOS 7 安装samba服务

    STEP 1. 安装 #安装 [root@study ~]yum install smaba [root@study ~]systemctl start smb nmb STEP 2. 建立共享目录以 ...

  10. 【论文速读】XiangBai_TIP2018_TextBoxes++_A Single-Shot Oriented Scene Text Detector

    XiangBai_TIP2018_TextBoxes++_A Single-Shot Oriented Scene Text Detector 作者和代码 Minghui Liao, Baoguang ...