多级菜单列表实现

最新推荐文章于 2023-11-30 09:46:42 发布

gmx9012

最新推荐文章于 2023-11-30 09:46:42 发布

阅读量1k

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_43823603/article/details/108348982

版权

核心思想

多级菜单列表，实现主要是依靠递归，最开始设置标志位，后续处理与先前不同，需要注意这一点。
注释部分代码是原先构思代码，只处理两层，后续根据递归完善相应代码。
需要注意，html只能解析到h5，所以之后的样式不正确，如果自己写，需要考虑这一点，避免直接用到开发环境。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="app" id="app"></div>
    <script>
      // 其中id代表当前元素的id，parentid代表父元素id，name表示当前元素的值，rank表示标签的层级，第几层
      let tree = [
        {
     id: 1, parentId: 0, name: '一级菜单A', rank: 1 },
        {
     id: 2, parentId: 0, name: '一级菜单B',