当前位置：首页 > news >正文

js树形菜单功能总结

news 2025/6/7 7:19:42

在前端开发中，树形菜单是一种常见且实用的组件，它能够以层级分明的结构展示数据，方便用户快速浏览和操作。本文将详细介绍如何使用 JavaScript 实现一个树形菜单

功能示例：

一、数据获取与解析
实现树形菜单的第一步是获取数据。在示例代码中，我们使用XMLHttpRequest对象从本地 JSON 文件recursion.json中获取数据。

let xhr = new XMLHttpRequest();
xhr.open('get', 'js/recursion.json', true);
xhr.send();
xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
       let text = xhr.responseText;
       // console.log(text);
       data = JSON.parse(text);
       // 将数据转换为树形，嵌套
       let menudata = buildmenu(data, 0)
       console.log(menudata);
       // 接着获取到页面上的div，调用渲染函数，输出到页面上
       document.getElementsByClassName('items')[0].innerHTML = renders(menudata);
   }
};
AI写代码
javascript
运行

上述代码中，open方法用于初始化请求，参数分别为请求方法（get）、请求地址（js/recursion.json）和是否异步（true）。send方法发送请求，onreadystatechange事件监听请求状态变化，当请求完成且状态码为 200 时，将响应文本通过JSON.parse方法解析为 JavaScript 对象，便于后续处理

二、数据处理：构建树形结构
获取到的数据通常是扁平化的，需要将其转换为树形结构，以便于展示。这一步通过递归函数buildmenu实现：

// 这个是递归函数，将数据展示的形式进行改变
function buildmenu(data, pid) {
   let result = [];
   for (let i in data) {
       if (data[i].pid == pid) {
           result.push(data[i]);
           result[result.length - 1].child = buildmenu(data, data[i].id);
       }
   }
   return result;
}
AI写代码
javascript
运行

该函数接收两个参数：原始数据data和父节点 IDpid。在循环遍历数据过程中，筛选出父节点 ID 与传入的pid相同的节点，将其添加到结果数组result中，并递归调用buildmenu函数，将子节点构建为树形结构，赋值给当前节点的child属性。最终返回构建好的树形数据

三、页面渲染：将数据转换为 DOM 结构
有了树形数据后，需要将其渲染到页面上。renders函数负责将树形数据转换为 HTML 字符串，并插入到页面中：

renders函数同样使用递归方式遍历树形数据。对于每个节点，如果存在子节点，则创建一个可展开 / 收起的标题元素，并递归调用renders函数渲染子节点；如果不存在子节点，则直接创建一个普通标题元素。最后将生成的 HTML 字符串返回，通过innerHTML属性插入到页面指定元素中。

四、交互功能实现
1. 展开与收起
为了实现树形菜单的展开与收起功能，我们定义了click_toggle函数：

function click_toggle(element){
   let childitem=element.nextElementSibling

   if(childitem.style.display==="block"){
       childitem.style.display="none";
   }
   else{
       childitem.style.display="block";
   }
}
AI写代码
javascript
运行

该函数接收一个 DOM 元素（标题元素）作为参数，获取其下一个兄弟元素（即子节点容器），根据子节点容器的显示状态切换其display属性，从而实现展开与收起效果。

2. 节点点击事件
对于叶子节点，我们定义了get_self函数，用于处理节点点击事件：

function get_self(self){
alert(self);
}
AI写代码
javascript
运行
在实际应用中，可以根据需求将alert替换为更复杂的业务逻辑，例如跳转到相关页面、展示详细信息等。

五、CSS 样式美化
为了使树形菜单在页面上展示得更加美观，我们使用 CSS 对其进行样式定义：

body{
               background-color: lightblue;
           }
           h1{
               width: 100%;
               text-align: center;
           }
           .items{
               font-size: 20px;
               color: white;
               margin: 10px auto;
               width: 40%;
               min-height: 100vh;
           }
           .title{
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               /* display: none; */
           }
           .title:hover{
               background-color: cornflowerblue;
           }
           .child{
               width: 95%;
               margin-left: 5%;
               display: flex;
               align-items: center;
               justify-content: space-between;
           }
           .box{
               width: 95%;
               border-bottom: 1px solid;
               margin-left: 5%;
               margin-top: 10px;
           }
AI写代码
css