1.大家可以看到这四个菜单栏,是先收起来的,点击它们的时候,它们就会展开。菜单的样式我就不设置了,大家可以自己去设置,这里先给大家看下js源码。
<body>
<div class="wrap" id="wrap">
<ul class="menu">
</ul>
</div>
<script>
var menu = [{
name: "菜单一",
children: ["商品一", "商品二", "商品三", "商品四"]
},
{
name: "菜单二",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单三",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单四",
children: ["商品一", "商品二", "商品三", "商品四"]
}
];
// 1.获取ul元素对象
var ul = document.querySelector('.menu');
// 2.利用for循环,创建li,并将其添加到ul中
for (var i = 0; i < menu.length; i++) {
var li = document.createElement('LI');
// 3.将span和二级菜单添加到li中
li.innerHTML = `<span class = "title">${menu[i].name}</span>`;
ul.appendChild(li);
// 新建一个ul对象,二级菜单
var ulChild = document.createElement('UL');
for (var j = 0; j < menu[i].children.length; j++) {
var ulLI = document.createElement('LI');
// 5.将children中的商品添加到二级菜单li中
ulLI.innerHTML = menu[i].children[j];
// 在二级菜单中加入ulLI
ulChild.appendChild(ulLI);
}
// 4.将二级菜单添加到li中
li.appendChild(ulChild);
}
// 6.点击span菜单,隐藏二级菜单,使用事件委托的方式
ul.addEventListener('click', function (e) {
if (e.target.nodeName === 'SPAN') {
//定义一个属性,得到样式的对象
var style = window.getComputedStyle(e.target.nextElementSibling);
// var style = getComputedStyle(ul);
console.log(style);
// 7.判断下一个兄弟元素ul的display属性是否是block
if( style.display === 'block'){
// 如果显示就把它隐藏,如果没有显示,就让他显示
e.target.nextElementSibling.style.display = 'none';
// 给span添加一个样式
e.target.classList.add('dis');
}else{
e.target.nextElementSibling.style.display = 'block';
// 给span删除样式
e.target.classList.remove('dis');
}
}
});
</script>
</body>