动态左侧二级下拉菜单基于bootstrap js

动态左侧二级下拉菜单

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="./css/bootstrap.css" rel="stylesheet"><script src="./js/jquery-3.4.1.min.js"></script><script src="./js/bootstrap.js"></script><title>左侧动态下拉菜单</title>
</head>
<body>
<div id="menu"style="width: 300px;background-color: #3285ff"></div>

js代码：

//初始化菜单的函数封装//全局变量var i=0;var initmenu = function(dropdown,menudata) {var dropdown = $(dropdown);function createNode(data) {var html ='<ul class="nav nav-tabs nav-stacked "id="menuUl'+i+'">';i++;for(var key in data) {if(data[key]["children"]) {html +='<li ><a target="myiframe"  style="color: #fbfbfb; " href="#menuUl'+i+'"  class="nav-header collapsed" data-toggle="collapse" aria-expanded="false" ><i class="'+data[key]["icon"]+'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span><span class="pull-right glyphicon glyphicon-chevron-down"></span>'+' </a>';//data-toggle="collapse"html += createChildNode(data[key]["children"]);} else {html +='<li><a target="myiframe" style="color: #fbfbfb" href="'+data[key]["link"]+'" onclick="displayModules(\''+data[key]["name"]+'\')"><i class="'+ data[key]["icon"]+'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span></a>';}      dropdown.append('</li>');}html +='</ul>';return html;}var html = createNode(menudata);dropdown.append(html);};function createChildNode(data) {var html ='<ul class="nav nav-tabs nav-stacked collapse"id="menuUl'+i+'" aria-expanded="false">';i++;for(var key in data) {html +='<li><a target="myiframe" style="color: #fbfbfb" href="'+data[key]["link"]+'" onclick="displayModules(\''+data[key]["name"]+'\')"><i class="'+ data[key]["icon"]+'"></i>&nbsp&nbsp<span>'+data[key]["name"]+'</span></a></li>';}html +='</ul>';return html;}//后台数据var data = [{"children": [{"name": "肥肉个人","link": "pooiummll.,hhhh","icon": "","modId": "448378509be111e9b059000c290ad930"},{"name": "大家","link": "pooiummll.,kjgjrojr","icon": "","modId": "ea803f869baf11e9b059000c290ad930"}],"name": "设置","link": "pooiummll.,/","icon": "","modId": "1196d307940811e9b059000c290ad930"},{"name": "夫人og","link": "fffffgreh","icon": "","modId": "4e8183b4988511e9b059000c290ad930"},{"name": "h6h","link": "frg4gg6gt5t","icon": "","modId": "60e50697964a11e9b059000c290ad930"},{"name": "2图片设置","link": "222gregjoijgi","icon": "","modId": "c796de129ec311e9b059000c290ad930"},{"name": "2新增图片设置","link": "222f'r'g'j'go'i'j'o","icon": "","modId": "db503fcf9ec311e9b059000c290ad930"}];initmenu("#menu",data);

如有疑问欢迎留言讨论，看到第一时间参与讨论。

动态左侧二级下拉菜单基于bootstrap js相关推荐

动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...

动态左侧二级下拉菜单基于bootstrap js

动态左侧二级下拉菜单

动态左侧二级下拉菜单基于bootstrap js相关推荐

最新文章

热门文章

动态左侧二级下拉菜单 基于bootstrap js

动态左侧二级下拉菜单

动态左侧二级下拉菜单 基于bootstrap js相关推荐

最新文章

热门文章

动态左侧二级下拉菜单基于bootstrap js

动态左侧二级下拉菜单基于bootstrap js相关推荐