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

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

這是模擬后端傳入的數(shù)據(jù)，可以看到結(jié)構(gòu)非常清晰，下面開始解析：

//解析函數(shù) 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);//這里可以寫菜單的樣式結(jié)構(gòu)...pp(arr[i].children);}else{console.log(arr[i].name);//這里可以寫菜單的樣式結(jié)構(gòu)...}}}pp(arr);} } parseJson(arr);

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。