js初级,菜单栏的展开与收缩
点击菜单分类选项,展开或关闭菜单的子选项。
<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>
<div class="wrap" id="wrap">
<ul class="menu">
</ul>
</div>
var menu = [{
name: "菜单一",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单二",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单三",
children: ["商品一", "商品二", "商品三", "商品四"]
}, {
name: "菜单四",
children: ["商品一", "商品二", "商品三", "商品四"]
}];
// 获取ul
var ul = document.getElementsByTagName('ul')[0];
// 向ul添加li 菜单分类 标题 div
for (var i = 0; i < menu.length; i++) {
var li = document.createElement('li');
li.innerHTML = '<div>' + menu[i].name + '</div>';
ul.appendChild(li);
li.firstElementChild.classList.add('title');
}
// 向菜单分类 li 里添加 商品栏 ul
for (var i = 0; i < menu.length; i++) {
var ulx = document.createElement('ul');
ul.children[i].appendChild(ulx);
ulx.style.backgroundColor = '#fff';
}
// 向商品栏 ul 添加 商品 li
for (var i = 0; i < menu.length; i++) {
for (var j = 0; j < menu[0].children.length; j++) {
var li = document.createElement('li');
li.innerHTML = menu[i].children[j];
ul.children[i].children[1].appendChild(li);
}
}
// 循环注册事件 ,点击关闭或打开菜单
// for (var i = 0; i < menu.length; i++) {
// ul.children[i].firstElementChild.onclick = function() {
// if (this.nextElementSibling.style.display === 'none') {
// this.nextElementSibling.style.display = 'block';
// } else {
// this.nextElementSibling.style.display = 'none';
// }
// }
// }
// 打开一个菜单,关闭其他菜单
for (var i = 0; i < menu.length; i++) {
ul.children[i].firstElementChild.nextElementSibling.style.display = 'none';
ul.children[i].firstElementChild.onclick = function() {
for (var j = 0; j < menu.length; j++) {
ul.children[j].firstElementChild.nextElementSibling.style.display= 'none';
}
this.nextElementSibling.style.display = 'block';
}
}
</script>
只打开一个菜单的效果图:
所有菜单都可以打开关闭的效果图: