48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
|
||
// 好处！！
|
||
// 1: 使用自执行函数，让函数自己运行
|
||
// 2: 使用局部作用域避免变量和方法的污染
|
||
(function (){
|
||
|
||
let lists = classDaras.result;
|
||
console.log(lists)
|
||
|
||
/**
|
||
* 1：只为了渲染页面
|
||
*/
|
||
function RenderLeftMenu() {
|
||
lists.forEach(function(val,index) {
|
||
$(".view-left ul").append(`<li class="${ index == 0 ? 'active':'' }">${val.name}</li>`)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 绑定点击事件
|
||
*/
|
||
function BindClick() {
|
||
$(".view-left ul li").on('click',function(){
|
||
|
||
$(this).addClass('active').siblings().removeClass('active')
|
||
RenderRightMenu( $(".view-left ul li").index($(this)) )
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 渲染右边对应的子分类
|
||
* @param {*} id
|
||
*/
|
||
function RenderRightMenu(id) {
|
||
$(".view-right ul").empty();
|
||
lists[id].list.forEach(val =>{
|
||
$(".view-right ul").append(`<li>
|
||
<a href="./list.html?id=${val.id}&status=true">${val.name}</a>
|
||
</li>`)
|
||
})
|
||
}
|
||
|
||
RenderLeftMenu()
|
||
BindClick()
|
||
RenderRightMenu(0)
|
||
|
||
|
||
})() |