Web前端開發中，樹形級聯菜單是一種常見的互動元件，通過層級結構展示資訊并支援選擇操作。本文将以代碼為例，分步介紹如何實作一個樹形級聯菜單。無論你是否具備相關經驗，都能輕松掌握這一技能。
1、了解樹形資料結構
樹形結構是一種非線性資料結構，由節點和邊組成。每個節點可以有多個子節點，而根節點沒有父節點。在實作樹形級聯菜單之前，我們需要了解樹的基本概念。
2、搭建基礎HTML結構
我們從建立一個基礎的HTML檔案開始，命名為index.html，并添加必要的樣式和腳本引用。在HTML的 <body> 标簽内，我們添加一個空白的 <ul> 元素，這将作為樹形菜單的容器。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tree Menu</title>
<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
</head>
<body>
<ul id="tree-menu"></ul>
</body>
</html> 3、資料準備與加載
為了模拟樹形資料，我們可以定義一個包含層次結構的JSON對象。這裡以一個網絡裝置目錄作為示例，資料結構如下所示：
JavaScript
const data = [
{
label: 'Device 1',
children: [
{
label: 'Subdevice 1-1',
children: []
},
{
label: 'Subdevice 1-2',
children: [
{
label: 'Subdevice 1-2-1',
children: []
}
]
}
]
},
{
label: 'Device 2',
children: []
}
]; 4、遞歸生成樹形菜單
我們通過document.getElementById("tree-menu")擷取樹形菜單的容器，然後遞歸周遊資料對象，将每個節點生成為菜單項，并添加到容器中。`
JavaScript
function buildTree(menuContainer, data) {
data.forEach(item => {
const li = document.createElement('li');
li.innerText = item.label;
if (item.children.length > 0) {
const ul = document.createElement('ul');
buildTree(ul, item.children);
li.appendChild(ul);
}
menuContainer.appendChild(li);
});
}
const treeMenu = document.getElementById('tree-menu');
buildTree(treeMenu, data); 5、實作菜單展開與折疊
通過添加自定義的CSS樣式和JavaScript事件處理，我們可以實作樹形菜單的展開與折疊功能。使用者點選菜單項時，相應的子菜單将顯示或隐藏。
CSS
#tree-menu ul {
display: none;
}
#tree-menu li.collapsed > ul {
display: block;
} 以上代碼将初始狀态下的子菜單隐藏，當菜單項的父級li元素帶有collapsed類名時，顯示對應的子菜單。
JavaScript
document.querySelectorAll('#tree-menu li').forEach(li => {
const subMenu = li.querySelector('ul');
if (subMenu) {
li.addEventListener('click', () => {
li.classList.toggle('collapsed');
});
}
}); 通過以上代碼，當使用者點選帶有子菜單項的菜單項時，通過添加或移除collapsed類名，實作子菜單的顯示或隐藏。
6、菜單選擇與資料互動
在樹形級聯菜單中，我們經常需要擷取使用者所選的值，并将其用于後續的資料互動。為了實作這一功能，我們可以為每個菜單項添加一個點選事件處理函數，并将所選的值存儲在全局變量中。
首先，在JavaScript代碼中，聲明一個全局變量selectedValue用于存儲使用者所選的值：
JavaScript
let selectedValue = '';
document.querySelectorAll('#tree-menu li').forEach(li => {
li.addEventListener('click', (e) => {
selectedValue = li.innerText;
// 阻止時間冒泡
e.stopPropagation();
});
}); 然後，當使用者點選任意菜單項時，相應的點選事件将觸發，将該菜單項的文本内容指派給selectedValue變量。
在後續的資料互動過程中，我們可以使用selectedValue變量來擷取使用者所選的值，并進行相應的處理。
希望本文能夠對您有所幫助，感謝您的閱讀！
人人為我，我為人人，謝謝您的浏覽，我們一起加油吧。