菜單遍歷用遞歸的方法最簡單，不用考慮有多少級，可以實現全部遍歷，前提是后臺代碼的規范性，一般從后臺返回的數據是json格式，這里有兩種結構，一種是用pid的形式，一種是用children的形式，什么意思呢，用pid的形式，就是返回的數據沒有層級結構，需要你通過查詢pid來看是否有父級對象，如果有再往上找，直到沒有pid屬性，那就是一級菜單了，這種方式不利于前端的實現；第二種就是我將要說的這種“children”的形式，這種json格式可以明顯看出菜單的層級結構，前端可以使用遞歸的方法實現無限極分類，非常方便。廢話不多說，直接上代碼：

var arr = [{"id": 1,"name": "一級菜單1","children":[{"id": 2,"name": "1-1二級菜單","children":[{"id":3,"name":"1-1-1三級菜單","children":[]},{"id":4,"name":"1-1-2三級菜單","children":[{"id":5,"name":"1-1-2-1四級菜單","children":[]}]}]}] },{"id": 6,"name": "一級菜單2","children":[{"id": 7,"name": "2-1二級菜單","children":[{"id":8,"name":"2-1-1三級菜單","children":[]},{"id":9,"name":"2-1-2三級菜單","children":[{"id":10,"name":"2-1-2-1四級菜單","children":[]}]}]}] }];

這是模擬后端傳入的數據，可以看到結構非常清晰，下面開始解析：

//解析函數 function parseJson(arr){if(arr.length!=0){function pp(arr){for(var i=0;i<arr.length;i++){if(arr[i].children && arr[i].children.length!=0){console.log(arr[i].name);//這里可以寫菜單的樣式結構...pp(arr[i].children);}else{console.log(arr[i].name);//這里可以寫菜單的樣式結構...}}}pp(arr);} } parseJson(arr);

利用回調函數就將代碼解析了，這里的console.log是調試代碼，實際可以替換為菜單的樣式等。

總結

以上是生活随笔為你收集整理的递归方法无限级菜单--javascript v1.0的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。