JavaScript樹形菜單功能實現(xiàn)方法總結(jié)
前言
在前端開發(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)獲取用戶信息并存入數(shù)據(jù)庫操作,涉及微信小程序wx.request后臺數(shù)據(jù)交互及php數(shù)據(jù)存儲相關操作技巧,需要的朋友可以參考下2019-05-05通過JavaScript腳本復制網(wǎng)頁上的一個表格
通過JavaScript腳本復制網(wǎng)頁上的一個表格...2006-07-07JavaScript中Textarea滾動條不能拖動的解決方法
這篇文章主要介紹了JavaScript中Textarea滾動條不能拖動的解決方法,主要針對IE瀏覽器中Textarea滾動條綁定了onfocus事件時分析對應的處理方法,需要的朋友可以參考下2015-12-12html的DOM中document對象anchors集合用法實例
這篇文章主要介紹了html的DOM中document對象anchors集合用法,實例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下2015-01-01讓網(wǎng)站自動生成章節(jié)目錄索引的多個js代碼
這篇文章主要介紹了讓博客園博客自動生成章節(jié)目錄索引的多個js代碼,需要的朋友可以參考下2018-01-01