JavaScript树形菜单功能实现方法总结
前言
在前端开发中，树形菜单是一种常见且实用的组件，它能够以层级分明的结构展示数据，方便用户快速浏览和操作。本文将详细介绍如何使用 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);
}
};上述代码中，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;
}该函数接收两个参数：原始数据data和父节点 IDpid。在循环遍历数据过程中，筛选出父节点 ID 与传入的pid相同的节点，将其添加到结果数组result中，并递归调用buildmenu函数，将子节点构建为树形结构，赋值给当前节点的child属性。最终返回构建好的树形数据
三、页面渲染：将数据转换为 DOM 结构
有了树形数据后，需要将其渲染到页面上。renders函数负责将树形数据转换为 HTML 字符串，并插入到页面中：
function renders(data) {
let str = '';
for (let item of data) {
str += `<div class="box">`;
if (item.child.length > 0) {
str += `
<p class="title" onclick="click_toggle(this)">${item.name}</p>
<div style="display: none;" class="child">`;
str += renders(item.child);
str += `</div>`;
} else {
str += `<p class="title" onclick="get_self('${item.name}')">${item.name}</p>`;
}
str += `</div>`;
}
return str;
}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";
}
}
该函数接收一个 DOM 元素（标题元素）作为参数，获取其下一个兄弟元素（即子节点容器），根据子节点容器的显示状态切换其display属性，从而实现展开与收起效果。
2. 节点点击事件
对于叶子节点，我们定义了get_self函数，用于处理节点点击事件：
function get_self(self){
alert(self);
}在实际应用中，可以根据需求将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;
}上述 CSS 代码设置了页面背景颜色、标题样式、菜单容器样式、标题元素样式以及子节点容器样式等，使树形菜单在视觉上更加清晰和美观。
六、总结与优化方向
通过以上步骤，我们成功实现了一个功能完整的树形菜单。从数据获取、处理到页面渲染和交互，每一个环节都紧密相连，共同构成了一个实用的前端组件。
到此这篇关于JavaScript树形菜单功能实现方法的文章就介绍到这了,更多相关js树形菜单功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
JS removeAttribute()方法实现删除元素的某个属性
这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了详解Chart.js轻量级图表库的使用经验，Chart.js很容易上手，只需要在页面中引用脚本文件，并创建 <canvas> 节点即可渲染出图表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
本篇文章主要是对JS中document对象的一些重要属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
在开发中，我们会经常使用 JSON.stringify(object) 来序列化对象，但JSON.stringify方法除了了第一个参数外，还有其它参数可用，今天我们一起来看看这些参数是做啥的2023-05-05
这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了简单了解JavaScript弹窗实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。2010-05-05
这篇文章主要给大家介绍了关于JS异步执行结果获取的3种解决方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
本文主要介绍了js模拟微博发布消息的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论