<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
margin: 0;
list-style: none;
padding: 0;
}
.wrap {
width: 200px;
border: 1px solid #ccc;
text-align: center;
line-height: 2;
}
.title {
background: rgb(236, 135, 52);
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<ul class="menu">
</ul>
</div>
<script>
var menu = [{
name: "菜单一",
children: ["商品一", "商品二", "商品三", "商品四"]
},
{
name: "菜单二",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单三",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单四",
children: ["商品一", "商品二", "商品三", "商品四"]
}
];
// 根据数据长度添加菜单列表
var ul = document.querySelector("ul.menu");
// 遍历菜单数据数组
menu.forEach(function(item) {
// 创建li 添加内容为span+菜单名称
var li = document.createElement("li");
li.innerHTML = `<span class="title">${item.name}</span>`;
// 创建li下的子菜单 ul
var childUl = document.createElement("ul");
// 遍历数组的children数据 创建li 填充内容为商品
item.children.forEach(function(child) {
childUl.innerHTML += `<li>${child}</li>`;
})
// 将子菜单ul添加到每个li中去
li.appendChild(childUl);
// 并且将li添加到ul中去
ul.appendChild(li);
})
// 实现切换菜单功能 绑定点击事件 事件委托
ul.onclick = function(e) {
// 判断事件目标
if (e.target.className === "title") {
// 找到兄弟元素ul
var nextUl = e.target.nextElementSibling;
var style = getComputedStyle(nextUl);
// 如果是显示的就隐藏 否则就显示
if (style.display === "none") {
nextUl.style.display = "block";
} else {
nextUl.style.display = "none";
}
}
}
</script>
</body>
</html>