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' });
  });
});