html+js案例动态获取菜单

장숙혜

已于 2023-11-01 23:37:23 修改

阅读量225

点赞数 1

文章标签： javascript html 前端

于 2023-10-30 22:59:42 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/134130243

版权

本文介绍：通过html+js实现动态获取菜单（通过 JavaScript代码动态地创建一个网站导航菜单，并将其添加到页面中）。数据是数组对象，利用创建元节点、创建文本节点及创建的节点放入父元素等知识实现该效果。
完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态菜单获取</title>
  </head>
  <body>
    <header>
      <nav></nav>
    </header>
    <script>
      let menu = [
        {
          name: "首页",
        },
        {
          name: "公司介绍",
          children: [
            {
              name: "菜单一",
            },
            { name: "菜单二" },
            { name: "菜单三" },
          ],
        },
        {
          name: "产品",
          children: [
            { name: "菜单一" },
            { name: "菜单二" },
            { name: "菜单三" },
            { name: "菜单四" },
          ],
        },
        {
          name: "关于我们",
        },
        {
          name: "新闻",
        },
      ];
      // 找到装菜单ul的元素
      let box = document.getElementsByTagName("nav")[0];
      function menuItem(menu, box) {
        // 创建一个ul
        let ullist = document.createElement("ul");
        menu.forEach(function (item, index) {
          // 如果子菜单存在
          if ((item.children)) {
            // 创建一个li
            let lilist = document.createElement("li");
            // 创建li里面包裹的a标签
            let allA = document.createElement("a");
            // 将一级菜单名写入文本标签
            let text = document.createTextNode(item.name);
            // 文本加入a标签
            allA.appendChild(text);
            // a标签加入li标签
            lilist.appendChild(allA);
            // li标签加入ul标签
            ullist.appendChild(lilist);
            // 函数回调，再去判断二级菜单是否还有子菜单
            menuItem(item.children, lilist);
          } 
          // 如果没有子菜单
          else {
            ullist.innerHTML +=`<li><a href=""> ${item.name} </a></li>`; 
          }
        });
        // 将ul加入页面，展示在页面
        box.appendChild(ullist);
      }
      // 函数自执行
      menuItem(menu, box);
    </script>
  </body>
</html>

代码解析如下：
1、这里采用数组对象的数据格式。
当以后要修改数据时，直接改这一部分数据即可，就可以更新菜单。数组对象格式：[ { } ,{ },{ }…]

      let menu = [
        {
          name: "首页",
        },
        {
          name: "公司介绍",
          children: [
            {
              name: "菜单一",
            },
            { name: "菜单二" },
            { name: "菜单三" },
          ],
        },
        {
          name: "产品",
          children: [
            { name: "菜单一" },
            { name: "菜单二" },
            { name: "菜单三" },
            { name: "菜单四" },
          ],
        },
        {
          name: "关于我们",
        },
        {
          name: "新闻",
        },
      ];

2、html结构
这里用nav标签装ul等内容

    <header>
      <nav></nav>
    </header>

3、获取一级二级菜单内容并显示在页面上
首先，代码寻找页面上的导航菜单容器元素。

      let box = document.getElementsByTagName("nav")[0];

然后，代码定义了一个名为 menuItem 的函数，这个函数接受两个参数：菜单数据（即包含菜单条目的对象数组）和导航菜单容器元素。
接着，函数创建一个 ul 元素，并遍历菜单数据的每个条目。

如果条目有子菜单，那么函数会创建一个 li 元素和一个 a 元素，将一级菜单名添加到 a 元素中，再将 a 元素添加到 li 元素中，最后将 li 元素添加到 ul 元素中，并使用递归调用自身函数，处理子菜单。
如果条目没有子菜单，那么函数会直接将带有菜单名的 li 元素添加到 ul 元素中。最后，函数将 ul 元素添加到导航菜单容器元素中，这样导航菜单就会被展示在页面上。

      function menuItem(menu, box) {
        // 创建一个ul
        let ullist = document.createElement("ul");
        menu.forEach(function (item, index) {
          // 如果子菜单存在
          if ((item.children)) {
            // 创建一个li
            let lilist = document.createElement("li");
            // 创建li里面包裹的a标签
            let allA = document.createElement("a");
            // 将一级菜单名写入文本标签
            let text = document.createTextNode(item.name);
            // 文本加入a标签
            allA.appendChild(text);
            // a标签加入li标签
            lilist.appendChild(allA);
            // li标签加入ul标签
            ullist.appendChild(lilist);
            // 函数回调，再去判断二级菜单是否还有子菜单
            menuItem(item.children, lilist);
          } 
          // 如果没有子菜单
          else {
            ullist.innerHTML +=`<li><a href=""> ${item.name} </a></li>`; 
          }
        });
        // 将ul加入页面，展示在页面
        box.appendChild(ullist);
      }
      // 函数自执行
      menuItem(menu, box);
    </script>

效果如下:(注意-样式效果可以自行通过csst添加)
在这里插入图片描述