用Jquery实现无限目录树形结构,实现的几种方式?

1.静态写法:(固定的几个目录可以用这种方法实现);
效果图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归无限及目录树实现</title>
  <link rel="stylesheet" type="text/css" href="../css/wuxianjimulu.css">
</head>
<body>
  <div class="lists">

  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="../js/wuxianjimulu.js"></script>
</body>
</html>

var data=[//写的固定的静态数据
  {
    name:'IT互联网',
    child:[
      {name:'编辑语言',child:[{name:'java'},{name:'C#/.net'},{name:'python'},{name:'accp软件开发'}]},
      {name:'移动开发',child:[{name:'android开发'},{name:'ios开发'}]},
      {name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'webGL一代'},{name:'webGL二代'}]}]}
    ]   
  },
  {name:'设计创作',
   child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
          {name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
          {name:'软件设计'}]
  },
  {name:'升学考研',
   child:[{name:'考研'},{name:'大学'},{name:'高中'},{name:'初中'}]
  },
  {name:'职业考证',
   child:[{name:'公务员',child:[{name:'教师开始'},{name:'建筑工程'}]}]
  }
];
//第一种用Jquery实现数据的互通
$(function(){
  //定义一个变量
  var str="<ul>";
  //先得到第一级目录
  for(var i=0;i<data.length;i++){
     str+=` <li>${data[i].name}</li>`;//不断追加数据处理
   
     if(data[i].child){  //判断是否存在第二级子目录
       str+='<ul class="item_warp">';
       for(var j=0;j<data[i].child.length;j++){
         str+=`<li>${data[i].child[j].name}</li>`

         if(data[i].child[j].child){ //判断是否存在第三级子目录
            str+="<ul class='item_warp_map'>";
            for(var k=0;k<data[i].child[j].child.length;k++){
              str+=`<li>${data[i].child[j].child[k].name}</li>`
            };
            str+="</ul>";
         }

       };//for循环中i相当于var定义的函数作用域(整个函数体内都会受到影响),所以不能起一样的名字
       str+="</ul>";//结束标签
     }
  };
  str+="</ul>";//结束标签
  $('.lists').html(str);
})

css

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body,html{
 height: 100%;
 overflow-x: hidden;
}
li{
  list-style-type: square;
  list-style-position:outside;
}
.lists .item_warp li,
.lists .item_warp_map li
{
  display:inline-block;
  width: 100%;
  text-align: left;
}
.lists .item_warp li{
  margin-left: 15%;
  font-size: 12px;
  color:#666666;
  font-weight:600;
}
.lists .item_warp_map li{
  margin-left: 25%;
  font-size: 10px;
  color:darkgray;
}

第二种方法递归:
效果图:如下:
展开:
在这里插入图片描述
收起:

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归无限及目录树实现</title>
  <link rel="stylesheet" type="text/css" href="../css/wuxianjimulu.css">
</head>
<body>
  <div class="lists">

  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="../js/wuxianjimulu.js"></script>
</body>
</html>

css

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body,html{
 height: 100%;
 overflow-x: hidden;
}
li{
 list-style: none;
}
.lists .active_warp{
  display: inline-block;
  padding-left: 15%;
  width: 100%;
}
.lists .item{
  font-size: 12px;
  color:#666666;
  font-weight:600;
  width:100%;
}
.lists .item span{
  width: 1rem;
  height: 1rem;
  line-height: .6rem;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border:1px solid blue;
  color:red;
  margin-right: .25rem;
  vertical-align: middle;
}

var data=[//写的固定的静态数据
  {
    name:'IT互联网',
    child:[
      {name:'编辑语言',child:[{name:'java'},{name:'C#/.net'},{name:'python'},{name:'accp软件开发'}]},
      {name:'移动开发',child:[{name:'android开发'},{name:'ios开发'}]},
      {name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'2D游戏'},{name:'3D游戏'}]}]}
    ]   
  },
  {name:'设计创作',
   child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
          {name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
          {name:'软件设计'}]
  },
  {name:'升学考研',
   child:[{name:'考研'},{name:'大学'},{name:'高中'},{name:'初中'}]
  },
  {name:'职业考证',
   child:[{name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
  }
];
//第一种用Jquery实现数据的互通
$(function(){
  //定义一个变量
  // var str="<ul>";
  // //先得到第一级目录
  // for(var i=0;i<data.length;i++){
  //    str+=` <li>${data[i].name}</li>`;//不断追加数据处理
   
  //    if(data[i].child){  //判断是否存在第二级子目录
  //      str+='<ul class="item_warp">';
  //      for(var j=0;j<data[i].child.length;j++){
  //        str+=`<li>${data[i].child[j].name}</li>`

  //        if(data[i].child[j].child){ //判断是否存在第三级子目录
  //           str+="<ul class='item_warp_map'>";
  //           for(var k=0;k<data[i].child[j].child.length;k++){
  //             str+=`<li>${data[i].child[j].child[k].name}</li>`
  //           };
  //           str+="</ul>";
  //        }

  //      };//for循环中i相当于var定义的函数作用域(整个函数体内都会受到影响),所以不能起一样的名字
  //      str+="</ul>";//结束标签
  //    }
  // };
  // str+="</ul>";//结束标签
  // $('.lists').html(str);

  //第二种递归的方法(自己调自己)；
  function createTree(data){
     var str="<ul class='active_warp'>";
     for(var i=0;i<data.length;i++){
       str+=`<li class="item"><span>-</span>${data[i].name}`;//第一级
       if(data[i].child){//判断子目录有没有
        str+=createTree(data[i].child);//不断的传递子级目录进来
       }
       str+="</li>";
     };
     str+="</ul>";
     return str;
  };
  $('.lists').html(createTree(data));//第一次data的值传入，
  //单击事件
  $('.lists ul li').click(function(event){
    //阻止事件冒泡 (从子级往上冒泡直到根目录)
    //捕获事件(是从父级往下冒泡直到子级目录)
    event.stopPropagation();
    //判断是都有ul子级目录
    if($(this).find("ul").is(":visible")){//选中标签ul.is:visible 判断子级别是否显示
      //隐藏
      $(this).find("ul").hide();
      $(this).find("span").text("+");
    }else{
      //显示
      $(this).find("ul").show();
      $(this).find("span").text("-");
    }
  })
})

捕获事件和冒泡事件执行顺序图:
在这里插入图片描述

总结：下次在补充vue的实现方法。

原文链接：https://blog.csdn.net/weixin_46409887/article/details/115899047