今天莫名其妙想用原生js实现二级菜单，之前用jquery感觉挺简单的，但是jquery好久没用了，试着用原生的js实现一下。
首先用nodeName判断子节点为li元素，然后就有二种实现方式
1.item.style.display用none和block进行菜单伸缩
这种方式挺常见的，但是一开始判断display的值要考虑多一些，因为这种方式加css是直接加到标签上的。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
display: none;
}
</style>
</head>
<body>
<ul>电视剧
<li>鹤唳华亭</li>
<li>仙剑奇侠传</li>
<li>诛仙</li>
</ul>
<ul>电影
<li>钢铁侠</li>
<li>大鱼海棠</li>
<li>阿甘正传</li>
</ul>
<ul>小说
<li>红楼梦</li>
<li>倚天屠龙记</li>
<li>神雕侠侣</li>
</ul>
</body>
<script>
let oul=document.getElementsByTagName("ul");
for(let j=0;j<oul.length;j++){
oul[j].addEventListener("click",function(){
let son=Array.from(this.childNodes).filter(item=>item.nodeName.toLowerCase()=='li')
// 第一种方式
son.forEach(item=>{
if(item.style.display==='none'){
item.style.display='block';
}
// 这种方式改变style的值是直接上标签的css
else if(item.style.display===''){
item.style.display='block';
}
else{
item.style.display='none';
}
});
})
}
</script>
</html>
第二种是点击一级菜单给其子元素加一个类activeli，再次点击则删除该类
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
display: none;
}
.activeli{
display: block;
}
</style>
</head>
<body>
<ul>电视剧
<li>鹤唳华亭</li>
<li>仙剑奇侠传</li>
<li>诛仙</li>
</ul>
<ul>电影
<li>钢铁侠</li>
<li>大鱼海棠</li>
<li>阿甘正传</li>
</ul>
<ul>小说
<li>红楼梦</li>
<li>倚天屠龙记</li>
<li>神雕侠侣</li>
</ul>
</body>
<script>
let oul=document.getElementsByTagName("ul");
for(let j=0;j<oul.length;j++){
oul[j].addEventListener("click",function(){
let son=Array.from(this.childNodes).filter(item=>item.nodeName.toLowerCase()=='li');
son.forEach(item=>{
// 也可以直接用item.classList.contains()
if(!Array.from(item.classList).some(item=>item==="activeli")){
item.classList.add('activeli');
}else{
item.classList.remove('activeli')
}
})
})
}
</script>
</html>
