欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript樹形菜單功能實現(xiàn)方法總結(jié)

 更新時間:2025年08月01日 11:10:44   作者:好青崧  
樹形菜單是前端開發(fā)中常見的交互組件,用于展示具有層級關系的數(shù)據(jù)(如文件目錄、分類列表、組織架構(gòu)等),這篇文章主要介紹了JavaScript樹形菜單功能實現(xiàn)方法的相關資料,需要的朋友可以參考下

前言

在前端開發(fā)中,樹形菜單是一種常見且實用的組件,它能夠以層級分明的結(jié)構(gòu)展示數(shù)據(jù),方便用戶快速瀏覽和操作。本文將詳細介紹如何使用 JavaScript 實現(xiàn)一個樹形菜單

功能示例:

一、數(shù)據(jù)獲取與解析

實現(xiàn)樹形菜單的第一步是獲取數(shù)據(jù)。在示例代碼中,我們使用XMLHttpRequest對象從本地 JSON 文件recursion.json中獲取數(shù)據(jù)。

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);
		// 將數(shù)據(jù)轉(zhuǎn)換為樹形,嵌套
		let menudata = buildmenu(data, 0)
		console.log(menudata);
		// 接著獲取到頁面上的div,調(diào)用渲染函數(shù),輸出到頁面上
		document.getElementsByClassName('items')[0].innerHTML = renders(menudata);
	}
};

上述代碼中,open方法用于初始化請求,參數(shù)分別為請求方法(get)、請求地址(js/recursion.json)和是否異步(true)。send方法發(fā)送請求,onreadystatechange事件監(jiān)聽請求狀態(tài)變化,當請求完成且狀態(tài)碼為 200 時,將響應文本通過JSON.parse方法解析為 JavaScript 對象,便于后續(xù)處理

二、數(shù)據(jù)處理:構(gòu)建樹形結(jié)構(gòu)

獲取到的數(shù)據(jù)通常是扁平化的,需要將其轉(zhuǎn)換為樹形結(jié)構(gòu),以便于展示。這一步通過遞歸函數(shù)buildmenu實現(xiàn):

// 這個是遞歸函數(shù),將數(shù)據(jù)展示的形式進行改變
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;
}

該函數(shù)接收兩個參數(shù):原始數(shù)據(jù)data和父節(jié)點 IDpid。在循環(huán)遍歷數(shù)據(jù)過程中,篩選出父節(jié)點 ID 與傳入的pid相同的節(jié)點,將其添加到結(jié)果數(shù)組result中,并遞歸調(diào)用buildmenu函數(shù),將子節(jié)點構(gòu)建為樹形結(jié)構(gòu),賦值給當前節(jié)點的child屬性。最終返回構(gòu)建好的樹形數(shù)據(jù)

三、頁面渲染:將數(shù)據(jù)轉(zhuǎn)換為 DOM 結(jié)構(gòu)

有了樹形數(shù)據(jù)后,需要將其渲染到頁面上。renders函數(shù)負責將樹形數(shù)據(jù)轉(zhuǎn)換為 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函數(shù)同樣使用遞歸方式遍歷樹形數(shù)據(jù)。對于每個節(jié)點,如果存在子節(jié)點,則創(chuàng)建一個可展開 / 收起的標題元素,并遞歸調(diào)用renders函數(shù)渲染子節(jié)點;如果不存在子節(jié)點,則直接創(chuàng)建一個普通標題元素。最后將生成的 HTML 字符串返回,通過innerHTML屬性插入到頁面指定元素中。

四、交互功能實現(xiàn)

1. 展開與收起

為了實現(xiàn)樹形菜單的展開與收起功能,我們定義了click_toggle函數(shù):

function click_toggle(element){
	let childitem=element.nextElementSibling
	
	if(childitem.style.display==="block"){
		childitem.style.display="none";
	}
	else{
		childitem.style.display="block";
	}
}

該函數(shù)接收一個 DOM 元素(標題元素)作為參數(shù),獲取其下一個兄弟元素(即子節(jié)點容器),根據(jù)子節(jié)點容器的顯示狀態(tài)切換其display屬性,從而實現(xiàn)展開與收起效果。

2. 節(jié)點點擊事件

對于葉子節(jié)點,我們定義了get_self函數(shù),用于處理節(jié)點點擊事件:

function get_self(self){
	alert(self);
}

在實際應用中,可以根據(jù)需求將alert替換為更復雜的業(yè)務邏輯,例如跳轉(zhuǎn)到相關頁面、展示詳細信息等。

五、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 代碼設置了頁面背景顏色、標題樣式、菜單容器樣式、標題元素樣式以及子節(jié)點容器樣式等,使樹形菜單在視覺上更加清晰和美觀。

六、總結(jié)與優(yōu)化方向

通過以上步驟,我們成功實現(xiàn)了一個功能完整的樹形菜單。從數(shù)據(jù)獲取、處理到頁面渲染和交互,每一個環(huán)節(jié)都緊密相連,共同構(gòu)成了一個實用的前端組件。

到此這篇關于JavaScript樹形菜單功能實現(xiàn)方法的文章就介紹到這了,更多相關js樹形菜單功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論