框架功能是后台高亮不可缺少的功能，基本上所有的后台都需要框架功能，下面是我制作好的一个效果图
下面是我的框架里面功能的具体讲解，还有完整的代码示例
1.声明的变量
// 声明一个用于判断个人信息显示变量
let myes = 0;
// 声明一个用于切换树形菜单状态的变量
let picture = 2;
// 声明一个用于判断信息显示变量
let info = 0;
// 声明一个树形菜单转换后的数据
let treearr = [];
// 声明一个面包屑的数据
let breadcrumbarr = [];
// 声明一个请求的数据
let res;2.树形菜单功能
先通过接口请求获取数据，我这里用的是json，所以你们想写成接口请求的可以自己改一下
function requests() {
$(document).ready(function() {
//获取数据
$.ajax({
//获取数据链接
url: 'js/ifrom.json',
//获取什么类型的数据
dataType: 'json',
//成功响应
success: function(data) {
//让data等于响应回来的数据
// 先在面包屑数据push首页的数据
breadcrumbarr.push(data[0]);
// 使用变量获取数据方便在下面使用
res = data;
//让数组等于转换完的数据
treearr = tree_menu(data, 0, []);
//获取数组
show_tree(treearr);
// 创建一个新的p元素的jQuery对象
var $newParagraph = $("<div class='block'></p>");
// 获取目标div元素（假设它的id是myDiv）
var $targetDiv = $('.treemenu');
// 将新的p元素添加到div元素的末尾
$targetDiv.append($newParagraph);
// 如果存储的这个数据的值为1执行下面的操作
if (localStorage.getItem('lock') == 1) {
// 请求这个函数
request();
};
// 如果存储的这个参数不是undefined执行下面的操作
if (localStorage.getItem('i') != undefined) {
// 声明存储获取最后显示页面的数据
let paneldata = JSON.parse(localStorage.getItem('paneldata'));
// 获取存储最后的显示页面的下标
let i = localStorage.getItem('i');
// 把之前存储的面包屑数据获取过了，重新赋值给面包屑的数组
breadcrumbarr = JSON.parse(localStorage.getItem('breadcrumbarr'));
// 请求渲染面包屑显示树形菜单高亮的函数
panel(paneldata, i);
};
},
error: function(xhr, status, error) {
// 当请求失败时执行的回调函数
console.error('请求失败:', status, error);
// 可以在这里处理请求失败的情况，例如显示错误信息给用户
}
});
});
}这个函数是在请求接口这个函数里面调用的，通过这个函数把接口返回的数据转换成多维的数组结构，如果一开始接口返回的解锁多维的数据，就不需要使用这个函数
//转换数据
function tree_menu(data, pid, treearr) {
//遍历数据
for (let i = 0; i < data.length; i++) {
//判断data下标的pid是否等于pid
if (data[i].pid == pid) {
//用dtat下标的子节点，继续调用函数
data[i].children = tree_menu(data, data[i].id, []);
//把获取到的放入到数组里面
treearr.push(data[i]);
}
}
//返回arr
return treearr;
}然后通过转换好的数据结构把数据渲染到树形菜单这个div里面，这个渲染函数也是在接口请求函数里面调用的，但是它在上面这个函数的下面，因为要先执行数据转换才能，转换好的数据才能让渲染使用，渲染出来的才是有子级的内容
//渲染
function show_tree(arrs) {
//声明一个字符串先写一个大盒子包起来
let str = `<div class="tree_wrap">`;
// 获取存储的点击的页面名字
let name = localStorage.getItem('name');
//遍历数组
for (let i = 0; i < arrs.length; i++) {
//判断它的子级长度大于0
if (arrs[i].children) {
if (arrs[i].children.length > 0) {
//拼接它本身，拼接子级，通过递归继续判断它的子级
str += `<div class="icon icons"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div><img class="ico" src="./img/xia.png" alt="" /></div>
<div style="display: none;" class="show tree_wrap">`;
str += show_tree(arrs[i].children);
str += `</div>`;
} else {
if (arrs[i].pid == 0) {
//拼接它本身
str +=
`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;
} else {
str +=
`<div class="icon" onclick="panel(${JSON.stringify(arrs[i]).replace(/\"/g,"'")},${i})" ><div class="child"><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;
}
}
} else {
//拼接它本身
str +=
`<div class="icon"><div><img class="treemenuleft" src="${arrs[i].icon}" alt="" />${arrs[i].title}</div></div>`;
}
}
//拼接结束标签
str += `</div>`;
//渲染到页面上
$('.treemenu').html(str);
//显示首页的高亮
$('.icon').eq(0).addClass('icon-click');
//高亮点击事件
$(document).ready(function() {
$('.icon').on('click', function() {
// 移除所有菜单项的 icon-click 类
$('.icon').removeClass('icon-click');
// 为当前点击的菜单项添加 icon-click 类
$(this).addClass('icon-click');
});
});
//返回字符串
return str;
}下面是点击父级显示子级的函数
//点击父级显示子级
$(document).on('click', '.icons', function() {
//获取子级框架
let children = $(this).next();
//获取图片，过渡1s
$(this).find('.ico').css('transition', 'all 0.5s');
//判断是否显示
if (children.css('display') == 'block') {
//滑出
children.hide(500);
//图片初始化
$(this).find('.ico').css('transform', 'rotate(0deg)');
} else {
//滑入
children.show(500);
//图片旋转180
$(this).find('.ico').css('transform', 'rotate(180deg)');
}
});3.面包屑渲染
面包屑渲染是先通过树形菜单的点击事件获取的
下面是树形菜单的点击事件
//点击渲染面包屑
function panel(paneldata, i) {
// 移除所有菜单项的 icon-click 类
$('.icon').removeClass('icon-click');
//高亮点击事件
if (paneldata.id == 4) {
// 为当前点击的菜单项添加 icon-click 类
$('.icon').eq(3).addClass('icon-click');
} else if (paneldata.id == 6) {
// 为当前点击的菜单项添加 icon-click 类
$('.icon').eq(5).addClass('icon-click');
} else {
// 为当前点击的菜单项添加 icon-click 类
$('.icon').eq(i).addClass('icon-click');
}
// 存储一下菜单的名字方便下面使用
sessionStorage.setItem('title', paneldata.title)
// 如果面包屑数组了吗不存在这个id执行里面的操作
if (JSON.stringify(breadcrumbarr).indexOf(JSON.stringify(paneldata.id)) == -1) {
// 存储过来的数据放入到面包屑的数组里面
breadcrumbarr.push(paneldata);
}
// 获取存储的页面链接
sessionStorage.setItem('redirect', paneldata.path);
// 在标题页面显示当前所在页面的名字
$('#font').html(paneldata.title);
// iframe框架的链接改成树形菜单点击的页面链接
$('#iframe').attr('src', `./${paneldata.path}.html`);
// 存储一下点击的整条数据，方便在刷新和锁屏解锁之后使用
localStorage.setItem('paneldata', JSON.stringify(paneldata));
// 存储一下点击的数据下标，方便在刷新和锁屏解锁之后使用
localStorage.setItem('i', i);
// 存储一下面包屑的所有数据，方便在刷新和锁屏解锁之后使用
localStorage.setItem('breadcrumbarr', JSON.stringify(breadcrumbarr));
// 调用渲染面包屑函数
apple(breadcrumbarr);
}通过点击树形菜单把点击的树形菜单的这一条数据获取过来，先判断面包屑数组里面是否有这条数据，如果没有这条数据，把这条数据添加到面包屑的数组里面，通过调用面包屑渲染函数，把面包屑渲染出来
//面包屑渲染
function apple(data) {
// 获取存储的数据的名字
let name = sessionStorage.getItem('title');
//获取存储的链接
let redirect = sessionStorage.getItem('redirect');
// 声明一个字符串
let str = ``;
// 循环面包屑的数据
for (let i = 0; i < data.length; i++) {
// 如果data的id不等于1执行下面的操作
if (data[i].id != 1) {
// 字符串拼接面包屑的数据
str +=
`<div class="pagees" onclick="usb(${JSON.stringify(data[i]).replace(/\"/g,"'")})" style="background-color:${data[i].title==name?'#ecf5ff':''}; color:${data[i].title==name?'#5ca9ff':''}; "><div >${breadcrumbarr[i].title}</div>
<img onclick="clears(${JSON.stringify(data[i]).replace(/\"/g,"'")})" src="./img/ba60394b-1e8c-449d-a439-33b2b9038aff.png" alt="" /> </div>`
// iframe框架的链接改成树形菜单点击的页面链接
$('iframe').attr('src', `./${redirect}.html`);
// 改变面包屑的高亮
$(
最低0.47元/天 解锁文章
扫一扫
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
