标签：层级 title menu level jq children 美食 菜单栏 id
html部分
<div class="middle">
<div class="leftMenu">
<div class="topMenu">
<p class="menuTitle">中国美食榜单</p>
</div>
<div class="menu_list">
<ul></ul>
</div>
</div>
</div>
css部分
body{
background-color: #f0f3f4
}
.middle{
width: 250px;
margin: 0px auto;
}
.middle .leftMenu{
width: 260px;
height: 500px;
overflow: hidden;
overflow-y: scroll;
background-color: #1c2b36;
float: left;
}
.middle .leftMenu .topMenu{
height: 42px;
background-color: #0065a5;
display: flex;
justify-content: center;
}
.middle .leftMenu .topMenu img{
margin: 11px;
float: left;
}
.middle .leftMenu .topMenu .changeMenu{
cursor: pointer;
}
.middle .leftMenu .topMenu .banshi{
padding-left: 23px;
}
.middle .leftMenu .topMenu .menuTitle{
text-align: center;
color: #F2F2F2;
float: left;
line-height: 42px;
font-size: 16px;
width: 120px;
}
.menu_list {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
background: #354045;
}
.menu_list ul{
box-sizing: border-box;
}
.menu_list ul li{
display: block;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.menu_list ul li .menu_box{
display: none;
}
.menu_list .menu_titlt{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.menu_list ul li .fuMenu{
color: #F2F2F2;
font-size: 14px;
cursor: pointer;
height: 60px;
line-height: 60px;
text-align: center;
width: 100%;
border-bottom: 1px solid #16222b;
}
.menu_list ul li .div1 {
width: 100%;
height: auto;
display: none;
/* float: left; */
}
.menu_list ul li .div1 .zcd{
color: #869fb1;
font-size: 14px;
height: 60px;
background-color: #131e26;
margin-bottom: 1px;
cursor: pointer;
line-height: 60px;
text-align: center;
width: 100%;
}
.div1 {
height: 200px;
display: none;
}
.menu_list ul li .div1 .zcd:hover{ color: #FFF; background-color: #1c2b36; font-weight: bold; }
.removes{
color: #0FB9EF !important;
}
js部分
$(document).ready(function () {
let htmlstr = '';
// 数据初始化
const data = [
{
title: '北京美食',
id: 1,
level: 1,
children: [
{
title: '东城美食',
id: 11,
level: 2,
children: [
{
title: '东城美食街道1',
id: 111,
level: 3,
children: [],
},
{
title: '东城美食街道2',
id: 112,
level: 3,
children: [],
},
{
title: '东城美食街道3',
id: 113,
level: 3,
children: [],
},
],
},
{
title: '西城美食',
id: 12,
level: 2,
children: [
{
title: '西城美食街道1',
id: 121,
children: [],
},
{
title: '西城美食街道2',
id: 122,
children: [],
},
{
title: '西城美食街道3',
id: 123,
children: [],
},
],
},
{
title: '海淀美食',
id: 13,
level: 2,
children: [],
},
{
title: '朝阳美食',
id: 44,
level: 2,
children: [],
},
],
},
{
title: '上海美食',
id: 2,
level: 1,
children: [
{
title: '黄埔美食',
id: 21,
level: 2,
children: [
{
title: '黄埔美食街道1',
id: 211,
children: [
{
title: '黄埔美食街道交通大学',
id: 2111,
children: [],
},
{
title: '黄埔美食街道复旦大学',
id: 2112,
children: [],
},
],
},
{
title: '黄埔美食街道2',
id: 212,
children: [],
},
{
title: '黄埔美食街道3',
id: 213,
children: [],
},
],
},
{
title: '杨浦区美食',
id: 22,
level: 2,
children: [
{
title: '杨浦区街道1',
id: 221,
children: [],
},
{
title: '杨浦区街道2',
id: 222,
children: [],
},
{
title: '杨浦区街道3',
id: 223,
children: [],
},
],
},
{
title: '长宁区',
id: 23,
level: 2,
children: [
{
title: '长宁区美食1',
id: 231,
children: [
{
title: '长宁区美食11',
id: 2311,
children: [],
},
{
title: '长宁区美食12',
id: 2312,
children: [],
},
],
},
{
title: '长宁区美食2',
id: 232,
children: [],
},
{
title: '长宁区美食3',
id: 233,
children: [],
},
],
},
{
title: '徐汇区',
id: 24,
level: 2,
children: [
{
title: '徐汇区美食1',
id: 241,
level: 3,
children: [],
},
{
title: '徐汇区美食2',
id: 242,
level: 3,
children: [],
},
],
},
],
},
];
// 便利数据生成动态的目录
data.map(function (item) {
//一级目录
htmlstr += `
<li class="">
<div class="menu_titlt" id="Menu${item.id}">
<p class="fuMenu" >${item.title}</p>
<span class="iconfont icon-tianjiazengjiajia"></span>
</div><div class="div1 Menu${item.id}">`;
//二级目录以及子级目录容器
if (item.children.length > 0) {
recursionData(item.children);
}
// 结尾
htmlstr += `</div></li>`;
});
// 动态生成多级目录
$('.menu_list ul').html(htmlstr);
// 递归处理多层数据
function recursionData(item1) {
item1.map(function (item2, index) {
if (item2.children.length > 0) {
htmlstr += `
<div class="menu_titlt" id="Menu${item2.id}">
<p class="fuMenu" >${item2.title}</p>
<span class="iconfont icon-004-file"></span>
</div>
<div class="div1 Menu${item2.id}">
`;
recursionData(item2.children);
} else {
htmlstr += `
<p class="zcd" >${item2.title}</p>`;
}
});
htmlstr += `</div>`;
}
//绑定元素点击事件
$('.menu_list ul li').click(function () {
// 获取一级元素id
let getId = $(this).children('.menu_titlt').attr('id');
// 获取对应子级显示隐藏class
let menuBoxElment = $(this).children('.' + getId);
//判断对象是显示还是隐藏
if (menuBoxElment.is(':hidden')) {
//对应下级当前显示或者隐藏状态
if (!menuBoxElment.is(':animated')) {
//如果当前没有进行动画，则添加新动画
menuBoxElment.animate(
{
height: 'toggle',
},
500
);
}
}
});
//阻止子元素向上冒泡
$('.div1').click(function (e) {
e.stopPropagation();
});
//点击子菜单为子菜单添加状态样式，并移除所有其他子菜单样式
$('.menu_list ul li .div1 .zcd').click(function () {
$(this).addClass('removes').siblings().removeClass('removes');
$('.div1').each(function () {
if ($(this).is(':hidden')) {
$(this).children('.zcd').removeClass('removes');
}
});
});
//子级菜单点击展开
$('.menu_titlt').click(function () {
$(this)
.siblings('.' + $(this).attr('id'))
.animate({ height: 'toggle' });
});
});
标签：层级,title,menu,level,jq,children,美食,菜单栏,id 来源： https://blog.csdn.net/qq_44472790/article/details/120383110
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。