JS 三级目录

最新推荐文章于 2022-08-01 10:35:47 发布

甘乐2333

最新推荐文章于 2022-08-01 10:35:47 发布

阅读量957

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35254240/article/details/90757596

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script>
       var list=[
           { name:"第一章",value:[
               {name:"第一节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第二节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第三节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第四节",value:["第一段","第二段","第三段","第四段"]}
           ]},
           { name:"第二章",value:[
               {name:"第一节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第二节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第三节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第四节",value:["第一段","第二段","第三段","第四段"]}
           ]},
           { name:"第三章",value:[
               {name:"第一节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第二节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第三节",value:["第一段","第二段","第三段","第四段"]},
               {name:"第四节",value:["第一段","第二段","第三段","第四段"]}
           ]}
       ];
//     判断对象是不是数组
       init();
       function init() {
           createUl(list,document.body);
           var ul=document.querySelector("ul");
           ul.addEventListener("click",clickUlHandler)
       }
       function createUl(_list,parent) {
           var ul=document.createElement("ul");
           if(Array.isArray(_list)){
               for(var i=0;i<_list.length;i++){
                   var li=document.createElement("li");
                   if(_list[i].name){
                       li.textContent=_list[i].name;
                   }else{
                       li.textContent=_list[i];
                   }
                   if(Array.isArray(_list[i].value)){
                       createUl(_list[i].value,li);
                   }
                   ul.appendChild(li);
               }
           }
           parent.appendChild(ul);
       }
      /* function clickHandler(e) {
           e.stopPropagation();
           if(!this.firstElementChild) return;
           this.bool=!this.bool;
           if(this.bool) this.firstElementChild.style.display="none";
           if(!this.bool) this.firstElementChild.style.display="block";
       }*/
       function clickUlHandler(e) {
           e.stopPropagation();
           if(e.target.nodeName!=="LI") return;
           if(!e.target.firstElementChild)return;
           e.target.bool=!e.target.bool;
           if(e.target.bool) e.target.firstElementChild.style.display="none";
           if(!e.target.bool) e.target.firstElementChild.style.display="block";
       }
   </script>
</body>
</html>

甘乐2333

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS 三级目录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var list=[ ...
复制链接

扫一扫