javascript - 如何在html中使用json值制作分层动态菜单?
问题描述
我有一个像上面这样的 json 列表。我有部分视图,它应该是网站中的左侧菜单。我有带有 ul li 值的代码和他们的 CSS。我想创建一个循环并将它们的值放在 ul li 值的 HTML 代码中。
var data = [
{
name: 'A İLE BASLAYAN', link: '0', sub: null
},
{
name: 'B İLE BASLAYAN', link: '1', sub: [
{ name: 'Bellona', link: '0-0', sub: null },
{ name: 'Beko', link: '0-1', sub: null },
{ name: 'Baykal', link: '0-2', sub: null }
]
},
{
name: 'C İLE BASLAYAN', link: '2', sub: [
{ name: 'Ceyhan', link: '2-0', sub: null },
{ name: 'Cuma', link: '2-1', sub: null }
]
},
{
name: 'D İLE BASLAYAN', link: '3', sub: [
{ name: 'Denizli', link: '3-1', sub: null },
{ name: 'Deve', link: '3-2', sub: null }
]
}
]
解决方案
如果有人跟我一样,我有像belove这样的解决方案。
<div id="slideContainer"></div>
<script>
var data = [
{
name: 'A İLE BASLAYAN', sub: [
{ name: 'Asuman', sub: null }
]
},
{
name: 'B İLE BASLAYAN', link: '1', sub: [
{
name: 'Bellona', sub: [
{ name: 'Bellona Bayi1', sub: null },
{ name: 'Bellona Bayi 2', sub: null }]
},
{ name: 'Beko', sub: null },
{ name: 'Baykal', sub: null }
]
},
{
name: 'C İLE BASLAYAN', sub: [
{ name: 'Ceyhan', sub: null },
{ name: 'Cuma', sub: null }
]
},
{
name: 'D İLE BASLAYAN', sub: [
{ name: 'Denizli', sub: null },
{ name: 'Deve', sub: null }
]
}
]
var str = '<div id="m_aside_left" class="m-grid__item m-aside-left m-aside-left--skin-dark "><div id="m_ver_menu" class="m-aside-menu m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark " m-menu-vertical="1" m-menu-scrollable="1" m-menu-dropdown-timeout="500" style="position: relative;">';
str +='<ul class="m-menu__nav m-menu__nav--dropdown-submenu-arrow ">';
str += ' <li class="m-menu__item " aria-haspopup="true"><a href="index9bfb.html?page=index&demo=default" class="m-menu__link "><i class="m-menu__link-icon flaticon-line-graph"></i><span class="m-menu__link-title"> <span class="m-menu__link-wrap"> <span class="m-menu__link-text"> <label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">ARA</label></span> <span class="m-menu__link-badge"><span class="m-badge m-badge--danger">2</span></span> </span></span></a></li>';
for (var i = 0; i < data.length; i++) {
str += '<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover"><a href="javascript:;" class="m-menu__link m-menu__toggle"><i class="m-menu__link-icon flaticon-layers"></i><span class="m-menu__link-text">' + data[i].name + '</span><i class="m-menu__ver-arrow la la-angle-right"></i></a>'
if (data[i].sub != null) {
for (var j = 0; j < data[i].sub.length; j++) {
if (data[i].sub[j].sub != null) {
str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span><ul class="m-menu__subnav"><li class="m-menu__item" aria-haspopup="true" m-menu-submenu-toggle="hover">';
str += '<a href="javascript:;" class="m-menu__link m-menu__toggle"><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].name + '</span><i class="m-menu__ver-arrow la la-angle-right"></i></a>';
for (var k = 0; k < data[i].sub[j].sub.length; k++) {
str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span> <ul class="m-menu__subnav"> <li class="m-menu__item " aria-haspopup="true"><a href="index64cb.html?page=components/base/tabs/line&demo=default" class="m-menu__link "><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].sub[k].name + '</span></a></li></div>';
}
str += '</li></ul></div>';
}
else {
str += '<div class="m-menu__submenu"><span class="m-menu__arrow"></span><ul class="m-menu__subnav">';
str += '<li class="m-menu__item " aria-haspopup="true"><a href="indexd68c.html?page=components/base/state&demo=default" class="m-menu__link "><i class="m-menu__link-bullet m-menu__link-bullet--dot"><span></span></i><span class="m-menu__link-text">' + data[i].sub[j].name + '</span></a></li>';
str += '</ul></div>';
}
}
}
}
str += '</li></ul> </div></div>';
document.getElementById("slideContainer").innerHTML = str;
</script>
推荐阅读
- html - asp:menu 禁用默认的 MouseOver
- php - 贝宝定期结算
- java-8 - 将逻辑转换为 Streams (Java)(嵌套循环与计数器)
- list - 循环中的大列表错误以构建数据框 - python
- machine-learning - 使用 SGD 优化最大化损失目标
- python - 如何使用缓存加速 Django 中的堆叠查询
- groovy - 用于匹配地图中的值的 Groovy 模式
- c++ - 这是 C++ 中 gRPC 异步服务器中多线程 RPC 处理程序的有效方法吗?
- flutter - Android Studio 在新 MacBook Pro M1 Max 上运行缓慢
- excel - 从保存在特定文件夹中的多个 Excel 文件中按名称复制列并将其保存在 csv 中