jquery 實現無限極選單 點開收起
阿新 • • 發佈：2021-08-02
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
a{ text-decoration:none; }
.container{ box-sizing:border-box; margin:20pxauto; padding:10px; width:600px; border:1pxdashed#AAA; } .level{ display:none; font-size:14px; margin-left:10px; }
.level.level0{ display:block; margin-left:0; list-style:none; }
.levelli{ position:relative; padding-left:15px; line-height:30px; list-style:none; }
.levelli.icon{ position:absolute; left:0; top:10px; box-sizing:border-box; width:12px; height:12px; line-height:8px; text-align:center; border:1pxsolid#AAA; background:#EEE; cursor:pointer; }
.levelli.icon::after{ display:block; content:"+"; font-size:12px; font-style:normal; }
.levelli.open::after{ content:"-"; } .levelli.title{ color:#000; } </style> </head> <body> <divclass="container"> <ulclass="levellevel0"> <!--<li> <ahref=""class="title">前端開發</a> <emclass="iconopen"></em> <ulclass="levellevel1"style="display:block;"> <li> <ahref=""class="title">HTML5核心知識</a> </li> </ul> </li>--> </ul> </div>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> /** *無限極選單 */ functionqueryData(){ returnnewPromise(resolve=>{ $.ajax({ url:'./data.json', method:'get', dataType:'json', success:result=>{ resolve(result); } }) }) } $(asyncfunction(){ let$level=$('.level'); //獲取資料 letresult=awaitqueryData(); //console.log(result);
//資料繫結 letn=0; letbindHTML=functionbindHTML(result){ letstr=``; n++; result.forEach((item,index)=>{ let{name,open,children}=item; str+=`<li> <ahref=""class="title">${name}</a> ${children&&children.length>0?` <emclass="icon${open?'open':''}"></em> <ulclass="levellevel${n}"style="display:${open?'block':'none'};"> ${bindHTML(children)} </ul>` :''} </li> `; }); n--; returnstr;
} $level.html(bindHTML(result));
//點選+/-控制當前級別的顯示隱藏 //給當前樹形選單當中所有按鈕繫結點選事件->事件委派操作 $level.click(function(ev){ //獲取事件源：點選的誰，事件源就是誰 lettarget=ev.target, $target=$(target); //點選的是em if(target.tagName==='EM'){ let$ul=$target.next('ul'); $ul.stop().slideToggle(200); $target.toggleClass('open'); } });
}) </script> </body> </html> ----------------------data.json------------ [{ "name":"前端開發基礎", "open":true, "children":[{ "name":"HTML5核心知識", "children":[{ "name":"新增語義化標籤" }, { "name":"表單元素新特性" }, { "name":"音視屏處理" }, { "name":"canvas和webGL" }, { "name":"新增JS中的API" } ] }, { "name":"CSS3核心知識", "children":[{ "name":"新增選擇器" }, { "name":"字型圖示" }, { "name":"常用的樣式屬性" }, { "name":"背景的處理" }, { "name":"transform變形" }, { "name":"CSS3動畫", "children":[{ "name":"transition過度動畫" }, { "name":"animation幀動畫" }, { "name":"3D動畫的處理" } ] }, { "name":"新盒子模型屬性", "children":[{ "name":"flex彈性盒子模型" }, { "name":"box-sizing新盒子模型屬性" }, { "name":"cloumns多列布局" } ] } ] }, { "name":"實戰案例和佈局技巧", "children":[{ "name":"實戰案例練習", "children":[{ "name":"居中處理" }, { "name":"同行排列" }, { "name":"聖盃佈局" }, { "name":"雙飛翼佈局" }, { "name":"滑動門" }, { "name":"麵包屑導航" } ] }, { "name":"響應式佈局開發", "children":[{ "name":"viewport和dpi適配" }, { "name":"@media媒體查詢" }, { "name":"rem等比縮放" }, { "name":"百分比佈局" } ] } ] } ] },{ "name":"前端開發核心", "children":[{ "name":"JS（ES6）核心", "children":[{ "name":"基礎知識" }, { "name":"閉包作用域及堆疊記憶體" }, { "name":"面向物件和THIS處理" }, { "name":"同步非同步（事件迴圈、微任務、巨集任務）" }, { "name":"DOM事件和事件委託" }, { "name":"設計模式" } ] }, { "name":"AJAX前後端互動", "children":[{ "name":"AJAX基礎知識" }, { "name":"跨域策略請求" }, { "name":"TCP協議相關基礎知識" }, { "name":"效能和安全的初步優化" }, { "name":"常用的AJAX庫和外掛" } ] }, { "name":"底層原理和高階JS函式", "children":[{ "name":"函式柯里化" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] } ] },{ "name":"前端工程化", "children":[{ "name":"VUE全家桶", "children":[{ "name":"基礎知識" }, { "name":"MVVM實現原理" }, { "name":"路由處理" }, { "name":"vuex公共狀態管理" }, { "name":"element-ui元件應用和二次封裝" } ] }, { "name":"REACT全家桶", "children":[{ "name":"基礎知識" }, { "name":"MVC實現原理" }, { "name":"DOMDIFF" }, { "name":"VirtualDOM" }, { "name":"路由處理" }, { "name":"公共狀態管理", "children":[{ "name":"REACT-REDUX、DAVS/SAGA等" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] }, { "name":"高階租價" }, { "name":"antd元件應用和二次封裝" } ] }, { "name":"底層原理和高階JS函式", "children":[{ "name":"函式柯里化" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] }, { "name":"工程化開發部署", "children":[{ "name":"webpack" }, { "name":"git" }, { "name":"linux" } ] } ] },{ "name":"前端開發熱門點", "children":[{ "name":"TypeScript" }, { "name":"flutter" }, { "name":"reactnative" }, { "name":"小程式" }, { "name":"效能和安全的優化" } ] }] 我是Eric,手機號是13522679763
a{ text-decoration:none; }
.container{ box-sizing:border-box; margin:20pxauto; padding:10px; width:600px; border:1pxdashed#AAA; } .level{ display:none; font-size:14px; margin-left:10px; }
.level.level0{ display:block; margin-left:0; list-style:none; }
.levelli{ position:relative; padding-left:15px; line-height:30px; list-style:none; }
.levelli.icon{ position:absolute; left:0; top:10px; box-sizing:border-box; width:12px; height:12px; line-height:8px; text-align:center; border:1pxsolid#AAA; background:#EEE; cursor:pointer; }
.levelli.icon::after{ display:block; content:"+"; font-size:12px; font-style:normal; }
.levelli.open::after{ content:"-"; } .levelli.title{ color:#000; } </style> </head> <body> <divclass="container"> <ulclass="levellevel0"> <!--<li> <ahref=""class="title">前端開發</a> <emclass="iconopen"></em> <ulclass="levellevel1"style="display:block;"> <li> <ahref=""class="title">HTML5核心知識</a> </li> </ul> </li>--> </ul> </div>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> /** *無限極選單 */ functionqueryData(){ returnnewPromise(resolve=>{ $.ajax({ url:'./data.json', method:'get', dataType:'json', success:result=>{ resolve(result); } }) }) } $(asyncfunction(){ let$level=$('.level'); //獲取資料 letresult=awaitqueryData(); //console.log(result);
//資料繫結 letn=0; letbindHTML=functionbindHTML(result){ letstr=``; n++; result.forEach((item,index)=>{ let{name,open,children}=item; str+=`<li> <ahref=""class="title">${name}</a> ${children&&children.length>0?` <emclass="icon${open?'open':''}"></em> <ulclass="levellevel${n}"style="display:${open?'block':'none'};"> ${bindHTML(children)} </ul>` :''} </li> `; }); n--; returnstr;
} $level.html(bindHTML(result));
//點選+/-控制當前級別的顯示隱藏 //給當前樹形選單當中所有按鈕繫結點選事件->事件委派操作 $level.click(function(ev){ //獲取事件源：點選的誰，事件源就是誰 lettarget=ev.target, $target=$(target); //點選的是em if(target.tagName==='EM'){ let$ul=$target.next('ul'); $ul.stop().slideToggle(200); $target.toggleClass('open'); } });
}) </script> </body> </html> ----------------------data.json------------ [{ "name":"前端開發基礎", "open":true, "children":[{ "name":"HTML5核心知識", "children":[{ "name":"新增語義化標籤" }, { "name":"表單元素新特性" }, { "name":"音視屏處理" }, { "name":"canvas和webGL" }, { "name":"新增JS中的API" } ] }, { "name":"CSS3核心知識", "children":[{ "name":"新增選擇器" }, { "name":"字型圖示" }, { "name":"常用的樣式屬性" }, { "name":"背景的處理" }, { "name":"transform變形" }, { "name":"CSS3動畫", "children":[{ "name":"transition過度動畫" }, { "name":"animation幀動畫" }, { "name":"3D動畫的處理" } ] }, { "name":"新盒子模型屬性", "children":[{ "name":"flex彈性盒子模型" }, { "name":"box-sizing新盒子模型屬性" }, { "name":"cloumns多列布局" } ] } ] }, { "name":"實戰案例和佈局技巧", "children":[{ "name":"實戰案例練習", "children":[{ "name":"居中處理" }, { "name":"同行排列" }, { "name":"聖盃佈局" }, { "name":"雙飛翼佈局" }, { "name":"滑動門" }, { "name":"麵包屑導航" } ] }, { "name":"響應式佈局開發", "children":[{ "name":"viewport和dpi適配" }, { "name":"@media媒體查詢" }, { "name":"rem等比縮放" }, { "name":"百分比佈局" } ] } ] } ] },{ "name":"前端開發核心", "children":[{ "name":"JS（ES6）核心", "children":[{ "name":"基礎知識" }, { "name":"閉包作用域及堆疊記憶體" }, { "name":"面向物件和THIS處理" }, { "name":"同步非同步（事件迴圈、微任務、巨集任務）" }, { "name":"DOM事件和事件委託" }, { "name":"設計模式" } ] }, { "name":"AJAX前後端互動", "children":[{ "name":"AJAX基礎知識" }, { "name":"跨域策略請求" }, { "name":"TCP協議相關基礎知識" }, { "name":"效能和安全的初步優化" }, { "name":"常用的AJAX庫和外掛" } ] }, { "name":"底層原理和高階JS函式", "children":[{ "name":"函式柯里化" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] } ] },{ "name":"前端工程化", "children":[{ "name":"VUE全家桶", "children":[{ "name":"基礎知識" }, { "name":"MVVM實現原理" }, { "name":"路由處理" }, { "name":"vuex公共狀態管理" }, { "name":"element-ui元件應用和二次封裝" } ] }, { "name":"REACT全家桶", "children":[{ "name":"基礎知識" }, { "name":"MVC實現原理" }, { "name":"DOMDIFF" }, { "name":"VirtualDOM" }, { "name":"路由處理" }, { "name":"公共狀態管理", "children":[{ "name":"REACT-REDUX、DAVS/SAGA等" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] }, { "name":"高階租價" }, { "name":"antd元件應用和二次封裝" } ] }, { "name":"底層原理和高階JS函式", "children":[{ "name":"函式柯里化" }, { "name":"compos函式" }, { "name":"惰性思想" }, { "name":"元件外掛封裝" }, { "name":"底層原始碼解讀" } ] }, { "name":"工程化開發部署", "children":[{ "name":"webpack" }, { "name":"git" }, { "name":"linux" } ] } ] },{ "name":"前端開發熱門點", "children":[{ "name":"TypeScript" }, { "name":"flutter" }, { "name":"reactnative" }, { "name":"小程式" }, { "name":"效能和安全的優化" } ] }] 我是Eric,手機號是13522679763