效果:点击菜单会折叠下面的商品
<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) {
var li = document.createElement("li");
li.innerHTML = `<span class="title">${item.name}</span>`;
//循环在每个菜单项添加商品项
var childUl = document.createElement("ul");
item.children.forEach(function(child) {
childUl.innerHTML += `<li>${child}</li>`;
})
li.appendChild(childUl);
ul.appendChild(li);
})
//添加点击事件
ul.onclick = function(e) {
if (e.target.className === "title") {
var nextUl = e.target.nextElementSibling;
var style = getComputedStyle(nextUl);
if (style.display === "none") {
nextUl.style.display = "block";
} else {
nextUl.style.display = "none";
}
}
}
</script>
注意:
1、nextElementSibling返回元素节点之后的兄弟元素节点
2、getComputedStyle获取元素的css的样式
网页源码体现上面程序做了什么。