二级菜单js版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二级菜单js版</title>
<style>
ul, li {
list-style: none;
}
</style>
</head>
<body>
<ul class="first">
<li>
<a href="#election">电子产品
<ul class="second">
<li>手机</li>
<li>电脑</li>
</ul>
</a>
</li>
<li>
<a href="#clothes">服装
<ul class="second">
<li>T-shirt</li>
<li>裤子</li>
<li>裙子</li>
</ul>
</a>
</li>
</ul>
</body>
<script>
// 二级目录先隐藏
var second_uls = document.getElementsByClassName('second');
console.log(second_uls);
for (var i = 0; i < second_uls.length; i++) {
second_uls[i].style.display = 'none';
second_uls[i].parentNode.onclick = function (event) {
console.log(event);
console.log(event.target); //a元素
ul = event.target.firstElementChild
console.log(ul);
if (ul.style.display === 'none'){
ul.style.display = "block";
}else if(ul.style.display === 'block'){
ul.style.display = 'none';
}
}
}