多级菜单思路:在点击上一级菜单时应检测次级是否已经显示或者添加了,若添加了应该删除在添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多级联动菜单</title>
<style>
body {
display: flex;
}
.box {
margin: 0 2px;
width: 100px;
height: 50px;
background-color: #ccc;
overflow: hidden;
}
.btn,
.btn1,.btn2 {
text-align: center;
height: 50px;
width: 100%;
border: 0px;
}
.box:hover {
overflow: visible
}
</style>
</head>
<body>
<script src="./01/02-摸底/data.js"></script>
<script>
console.log(data);
var box = document.createElement('div')
box.className = 'box'
document.body.appendChild(box)
//遍历循环添加省按钮
for (let i = 0; i < data.length; i++) {
var button = document.createElement('button')
button.className = 'btn'
button.innerHTML = data[i].name//按钮中显省市名
box.appendChild(button)
//省级按钮添加点击事件
button.onclick = function () {
let _btn = document.querySelectorAll('.btn')
_btn[0].innerHTML = data[i].name//显示所选省
var _box = document.querySelectorAll('.box');//获取所有body下的盒子
for (let k = 1; k < _box.length; k++) { _box[k].remove() }//去除重复点击添加的市级盒子
var box1 = document.createElement('div')
box1.className = 'box'
document.body.appendChild(box1)
for (let j = 0; j < data[i].next.length; j++) {
var button1 = document.createElement('button')
button1.className = 'btn1'
button1.innerHTML = data[i].next[j].name//按钮中显示市名
box1.appendChild(button1)
//市级按钮添加点击事件
button1.onclick = function () {
let _btn1 = document.querySelectorAll('.btn1 '); //获取市级盒子中的按钮
_btn1[0].innerHTML = data[i].next[j].name//显示所选市
for (let k = 2; k < _box.length; k++) { _box[k].remove() }//去除重复点击添加的站级盒子
var box2 = document.createElement('div')
box2.className = 'box'
document.body.appendChild(box2)
for (let m = 0; m < data[i].next[j].next.length; m++) {
var button2 = document.createElement('button')
button2.className = 'btn2'
button2.innerHTML = data[i].next[j].next[m]//按钮中显示站名
box2.appendChild(button2)
//站级按钮添加点击事件
button2.onclick=function(){
let _btn2 = document.querySelectorAll('.btn2 ');//获取站级盒子中的按钮
_btn2[0].innerHTML = data[i].next[j].next[m]//显示所选站点
}
}
}
}
}
}
</script>
</body>
</html>
最终效果展示
初始样式
鼠标移入
点击云南按钮
点击水富县
重新选择省点击四川