首页 > 网络编程 > JavaScript > javascript技巧 > js树形菜单功能

JavaScript树形菜单功能实现方法总结

2025-08-01 11:10:31 作者：好青崧

树形菜单是前端开发中常见的交互组件,用于展示具有层级关系的数据(如文件目录、分类列表、组织架构等),这篇文章主要介绍了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树形菜单功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！