<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限极菜单</title>
<style>
body {
margin: 0;
background: url(./img/bg.png);
min-height: 100vh;
text-indent: 10px;
}
ul span{
text-indent: 0;
}
h1 {
margin: 40px auto;
background: url(./img/logo.png);
width: 208px;
height: 56px;
text-indent: -9999px;
}
ul {
padding: 0;
margin: 0 0 0 100px;
list-style: none;
/* display: none; */
}
.list-wrap>ul {
display: block;
}
li {
line-height: 30px;
cursor: pointer;
border-left: 1px dotted #e15671;
position: relative;
}
.last{
border-left:none;
}
span {
padding: 0 10px;
margin-left: -15px;
color: #e15671;
position: absolute;
left: 0;
top: 0;
}
h4{
font-weight: normal;
margin: 0;
}
</style>
</head>
<body>
<h1>miaov</h1>
<div class="list-wrap">
<!-- <ul>
<li>
<span>+</span>
<h4>第一阶段 JS基础入门</h4>
<ul>
<li>
<span>+</span>
第一章
<ul>
<li class="last">JS简介</li>
<li class="last">JS简介</li>
<li class="last">JS简介</li>
</ul>
</li>
<li>
<span>+</span>
第二章
</li>
</ul>
</li>
<li class="last">
<h4>第二阶段 JS核心功能探秘</h4>
</li>
</ul> -->
</div>
<script src="./data.js"></script>
<script>
var txt = loop(datas)
function loop(arr){
var str = '';
for (var i = 0; i < arr.length; i++) {
if (!!arr[i].children) {
// console.log('有嵌套的');
var vv = loop(arr[i].children);
str += '<li><span>+</span>'+arr[i].name+ vv +'</li>'
} else {
// console.log(arr[i]);
str += '<li class="last">'+ arr[i].name+'</li>'
}
}
if(str){
str = '<ul>' + str + '</ul>'
}
return str;
// console.log(str);
}
console.log(txt);
var listWarp = document.querySelector('.list-wrap');
listWarp.innerHTML = txt;
</script>
</body>
</html>
