AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js树状菜单制作

2024-10-17 10
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js树状菜单制作 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/tree.css" />
  </head>
  <script src="js/jquery-3.7.1.js"></script>
  <body>
    <div class="treemenu">
 
    </div>
    <script>
      // let ico;
      // let data;
      // let arr = [];
      // let xhr = new XMLHttpRequest();
      // xhr.open('get', 'js/tree.json', true);
      // xhr.send();
      // xhr.onreadystatechange = function() {
      //  if (xhr.readyState == 4 && xhr.status == 200) {
      //    data = JSON.parse(xhr.responseText);
      //    console.log(data);
      //    // fun(data);
      //    //arr=返回值
 
      //    function tree_menu(data, pid, arr) {
      //      //先循环一下数据
      //      for (let i = 0; i < data.length; i++) {
      //        //判断data下标的pid是否等于pid
      //        if (data[i].pid == pid) {
      //          //用dtat下标的子节点，继续调用函数
      //          data[i].children = tree_menu(data, data[i].id, []);
      //          //把data下标push进去
      //          arr.push(data[i]);
      //        }
      //      }
      //      //循环 结束返回值
      //      return arr;
      //    }
      //    arr = tree_menu(data, 0, [])
      //    console.log(arr);
      //    //打印一下arr
      //    show_tree(arr)
      //  }
      // };
 
      // // function fun(data) {
      // //   let arr = [];
      // //   for (let i in data) {
      // //     if (data[i].pid == 0) {
      // //           data[i].children = [];
      // //       for (let j in data) {
      // //         if (data[i].id == data[j].pid) {
      // //           data[j].children = [];
      // //           for (let k in data) {
      // //             if (data[j].id == data[k].pid) {
      // //               data[j].children.push(data[k]);
      // //             }
      // //           }
      // //           data[i].children.push(data[j]);
      // //         }
      // //       }
      // //       arr.push(data[i]);
      // //     }
      // //   }
      // //   console.log(arr);
      // // }
 
 
 
 
 
 
      // //渲染
      // function show_tree(arr) {
      //  //渲染里的大盒子
      //  let str = `<div class="tree_wrap">`;
      //  console.log(arr);
      //  //遍历数组
      //  for (let i in arr) {
      //    //判断数组的子级长度大于0
      //    if (arr[i].children.length > 0) {
      //      //渲染
      //      str += `<div class="icon" onclick="Btn(this,${i},arr)"><img class="icons" src="${arr[i].icon}" alt="" />${arr[i].name}<img class="ico" src="${arr[i].ico}" alt="" /></div>
          
      //    <div style="display: none;" class="show">`;
      //    //获取渲染后的元素节点
      //      ico = document.getElementsByClassName('ico');
      //      //显示数组的子级
      //      str += show_tree(arr[i].children);
      //      str += `</div>`;
      //    } else {
      //      //渲染
      //      str += `<div  class="icon"><img src="${arr[i].icon}" alt=""/>${arr[i].name}</div>`;
      //    }
      //  }
      //  //渲染
      //  str += `</div>`;
      //  //渲染
      //  document.getElementsByClassName('treemenu')[0].innerHTML = str;
      //  //返回值
      //  return str;
      // }
      
      // //点击点击
      // function Btn(obj) {
      //  //obj的子级元素
      //  let children = obj.nextElementSibling;
      //  //图片改变时的过渡效果
      //  obj.querySelector('.ico').style.transition = "transform  1s";
      //      //判断子级显示时
      //      if (children.style.display == 'block') {
      //        //让它不显示
      //    children.style.display = 'none';
      //    //同时图片返回到原来的样子
      //    obj.querySelector('.ico').style.transform = "rotate(0deg)";
      //  } else {
      //    //否则显示出来
      //    children.style.display = 'block';
      //    //图片旋转180
      //    obj.querySelector('.ico').style.transform = "rotate(180deg)";
      //  }
      // }
      
      
      
      
      $(document).ready(function() {
          let data;
          let arr = [];
          
          $.ajax({
              url: 'js/tree.json',
              dataType: 'json',
              success: function(response) {
                  data = response;
                  console.log(data);
                  arr = tree_menu(data, 0, []);
                  console.log(arr);
                  show_tree(arr);
              }
          });
          
          function tree_menu(data, pid, arr) {
              for (let i = 0; i < data.length; i++) {
                  if (data[i].pid == pid) {
                      data[i].children = tree_menu(data, data[i].id, []);
                      arr.push(data[i]);
                  }
              }
              return arr;
          }
          
          function show_tree(arr) {
              let str = `<div class="tree_wrap">`;
              
              for (let i = 0; i < arr.length; i++) {
                  if (arr[i].children.length > 0) {
                      str += `<div class="icon" onclick="Btn(this, ${i}, arr)"><img class="icons" src="${arr[i].icon}" alt="" />${arr[i].name}<img class="ico" src="${arr[i].ico}" alt="" /></div>
                              <div style="display: none;" class="show">`;
                      str += show_tree(arr[i].children);
                      str += `</div>`;
                  } else {
                      str += `<div class="icon"><img src="${arr[i].icon}" alt="" />${arr[i].name}</div>`;
                  }
              }
              
              str += `</div>`;
              $('.treemenu').html(str);
              return str;
          }
          
          $(document).on('click', '.icon', function() {
              let children = $(this).next();
              $(this).find('.ico').css('transition', 'transform 1s');
              
              if (children.css('display') == 'block') {
                  // children.css('display', 'none');
            children.hide(2000);
                  $(this).find('.ico').css('transform', 'rotate(0deg)');
              } else {
            children.show(2000);
                  // children.css('display', 'block');
                  $(this).find('.ico').css('transform', 'rotate(180deg)');
              }
          });
      });
    </script>
  </body>
</html>
文章标签：
JavaScript
关键词：
JavaScript树状菜单
神明木佑
目录
相关文章
亚丁号
|
5月前
|
移动开发 JavaScript 前端开发
分享113个JS菜单导航，总有一款适合您
分享113个JS菜单导航，总有一款适合您
亚丁号
77 0
亚丁号
|
5月前
|
JavaScript 前端开发 Python
分享77个JS菜单导航，总有一款适合您
分享77个JS菜单导航，总有一款适合您
亚丁号
39 0
亚丁号
|
5月前
|
JavaScript iOS开发 Python
分享114个JS菜单导航，总有一款适合您
分享114个JS菜单导航，总有一款适合您
亚丁号
59 0
Z_B_L
|
5月前
|
JSON JavaScript 前端开发
js树形菜单 如何用递归制作一个简单的树形菜单
js树形菜单 如何用递归制作一个简单的树形菜单
Z_B_L
87 0
神明木佑
|
1天前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
神明木佑
14 4
阿福的工作室
|
2月前
|
JavaScript 前端开发
JS选项卡如何制作
JS选项卡如何制作
阿福的工作室
24 0
刘志辉~
|
2月前
|
JavaScript
js之选项卡制作实例
js之选项卡制作实例
刘志辉~
26 0
亚丁号
|
5月前
|
移动开发 JavaScript 前端开发
分享111个JS菜单导航，总有一款适合您
分享111个JS菜单导航，总有一款适合您
亚丁号
138 0
聂聂脸
|
5月前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
聂聂脸
37 0
小吴吴吴呀
|
5月前
|
JSON JavaScript 数据格式
jQuery 树型菜单完整代码
jQuery 树型菜单完整代码
小吴吴吴呀
29 0