JSON無限折疊菜單編寫實例

 這篇文章主要介紹了JSON無限折疊菜單編寫實例，有需要的朋友可以參考一下

最近看了一篇關於JSON無限折疊菜單的文章 感覺寫的不錯，也研究了下代碼，所以用自己編碼方式也做了個demo 其實這樣的菜單項在我們網站上或者項目導航菜單項很常見的一種效果，特別是在一些電子商務網上上左側有分類是很常見的 或者說導航菜單有下拉效果也是很常見的，但是他們都是做死的 也就是頁面上代碼直接寫死的 然後實現那種下拉效果 而今天我們是通過JSON格式來自動生成的，或者可以說 要做這種折疊菜單效果 只需要開發人員提供我們前端開發這種JSON格式或者我們前端可以定這樣的格式也就ok了 其他的都可以直接引用這個代碼進去。下面給大家來分享下我的JS代碼！   下面我們來看看JSON個格式是個什麼樣的 格式如下：   碼 代碼如下: var testMenu=[     {         "name": "一級菜單",         "submenu": [             {                 "name": "二級菜單",                 "url": ""             },             {                 "name": "二級菜單",                 "url": ""             }         ]     },     {         "name": "一級菜單",         "submenu": [             {                 "name": "二級菜單",                 "url": ""             },             {                 "name": "二級菜單",                 "submenu": [                     {                         "name": "三級菜單",                         "submenu": [                             {                                 "name": "四級菜單",                                 "url": ""                             }                         ]                     },                     {                         "name": "三級菜單",                         "url": ""                     }                 ]             },             {                 "name": "二級菜單",                 "url": ""             },             {                 "name": "二級菜單",                 "submenu": [                     {                         "name": "三級菜單",                         "submenu": [                             {                                 "name": "四級菜單",                                 "url": ""                             },                             {                                 "name": "四級菜單",                                 "submenu": [                                     {                                         "name": "五級菜單",                                         "url": ""                                     },                                     {                                         "name": "五級菜單",                                         "url": ""                                     }                                 ]                             }                         ]                     },                     {                         "name": "三級菜單",                         "url": ""                     }                 ]             },             {                 "name": "二級菜單",                 "url": ""             }         ]     },     {         "name": "一級菜單",         "submenu": [             {                 "name": "二級菜單",                 "url": "&