JavaScript無限分類模塊讓我們在開發網站時很容易實現大量菜單或商品分類。這種方法可以用來幫助網站的訪問者更輕松地瀏覽網站內容。 無限分類的主要特點就是，分類可以無限嵌套，根據需要展開與收起,方便用戶使用。下面，我們將詳細介紹如何使用JavaScript無限分類。 無限分類的工作原理 在JavaScript無限分類中，我們使用的主要是遞歸函數。遞歸函數是一種自我調用的函數，因為它在調用自身以解決類似于大問題的小問題時特別有用。這種函數通常由一個基線情況和一個或多個遞歸情況組成。換句話說，遞歸函數就是一種用于解決大小可變的問題的方法。我們以以下的記錄為例來說明無限分類的工作原理。 { _id: "5a4222a851982a6f3e019a3e", name: "electronics", parent: { _id: "5a4222a751982a6f3e019789" name: "consumer goods", parent: { _id: "5a4222a651982a6f3e01956d", name: "goods", parent: null } } 其中parent表示了當前分類的上一級分類。 電子產品分類屬于消費品分類，它的父母是商品分類，而商品分類沒有父母。我們使用遞歸函數來將記錄轉換為嵌套對象，從而輕松實現JavaScript無限分類操作。 假設我們已經在HTML中創建了一個ul元素，現在讓我們來看一下關鍵的步驟。 // 創建遞歸函數 function buildMenu(li, item) { //檢查當前分類下是否存在子分類 if (!item.children || item.children.length === 0) { return; } // 創建ul元素并添加到li元素中 let ul = document.createElement('ul'); li.appendChild(ul); // 遍歷所有子類別并將它們添加到ul item.children.forEach((child) =>{ // 創建li元素，并添加到ul元素中 let childLi = document.createElement('li'); ul.appendChild(childLi); // 在li元素中添加分類名稱 let childSpan = document.createElement('span'); childSpan.innerText = child.name; childLi.appendChild(childSpan); // 遞歸此函數，以便可以在子類別中顯示子項 buildMenu(childLi, child); }); } 假設我們已經讀取了商品分類記錄（可能來自數據庫），我們可以將其傳遞給buildMenu函數來生成我們的分類樹。 const goodsLi = document.createElement('li'); buildMenu(goodsLi, records); 我們必須通過遞歸調用函數來確保所有父母節點上的子節點都被正確處理，通過為當前項目創建新的ul列表來向下移動并逐步構建我們的樹。在每個ul元素子節點中，我們重復此過程。 總結 JavaScript無限分類模塊是通過使用遞歸函數來實現的。其中當沒有子分類時函數將返回，然后使用document.createElement()方法在DOM中創建適當的元素，并逐步構建整個樹狀結構。 最后，我們可以自定義CSS樣式來改變分類樹的外觀。