html动态树形菜单代码

HTML动态树形菜单是一种常见的网页导航方式，它通常由树形结构和菜单项组成。树形结构呈现了网站的层次结构，而菜单项则为用户提供了访问网站各个页面的入口。下面是一份HTML动态树形菜单代码示例，让我们一起来分析一下。首先，我们需要在HTML文档中创建一个菜单容器，例如：

<div id="menu"></div>

接着，我们可以使用JavaScript来动态生成树形菜单。以下是一个简单示例：

html动态树形菜单代码

<script>
  // 声明菜单数据
  var menuData = [
    {
      label: "首页",url: "index.html"
    },{
      label: "产品",children: [
        {
          label: "产品A",url: "product-a.html"
        },{
          label: "产品B",url: "product-b.html"
        }
      ]
    },{
      label: "关于我们",url: "about-us.html"
    }
  ];

  // 递归生成菜单HTML
  function generateMenuHtml(data) {
    var html = "";
    for (var i = 0; i < data.length; i++) {
      var item = data[i];
      html += "<li>";
      if (item.children) {
        // 如果当前项有子项，则生成展开按钮和子菜单
        html += "<span class='expand-btn' onclick='toggleMenu(this.parentElement)'/>";
        html += "<a href='javascript:;' onclick='toggleMenu(this.parentElement)'>" + item.label + "</a>";
        html += "<ul class='sub-menu'>" + generateMenuHtml(item.children) + "</ul>";
      } else {
        // 如果当前项没有子项，则生成链接
        html += "<a href='" + item.url + "'>" + item.label + "</a>";
      }
      html += "</li>"
    }
    return html;
  }

  // 展开/关闭子菜单
  function toggleMenu(item) {
    var subMenu = item.querySelector(".sub-menu");
    if (subMenu) {
      subMenu.classList.toggle("show");
      item.querySelector(".expand-btn").classList.toggle("expanded");
    }
  }

  // 生成菜单HTML并插入页面
  document.getElementById("menu").innerHTML = generateMenuHtml(menuData);
</script>

以上代码实现了以下功能： - 声明了菜单数据，其中每个菜单项包含一个标签“label”和一个 URL地址“url”，如果有子菜单，则还包含一个“children”属性。 - 定义了一个递归函数用于生成菜单 HTML代码，这个函数接收一个菜单数据数组作为参数，遍历数组中每个菜单项并生成相应的HTML代码。如果当前菜单项有子菜单，则生成展开按钮和子菜单 HTML代码，并且再次调用自己生成子菜单 HTML代码。 - 定义了一个展开/关闭子菜单的函数，当用户点击展开按钮或菜单项时，会调用这个函数来切换子菜单的显示状态和展开按钮的样式。 - 在HTML文档中插入了一个空的菜单容器，然后使用JavaScript代码生成菜单HTML并插入到容器中。通过这样的方式，我们可以轻松地实现一个动态的树形菜单，并且可以根据需要动态修改菜单数据而不需要手动修改 HTML代码。这种方法不仅提高了开发效率，还使网站结构更加清晰易于维护。

html动态树形菜单代码

相关推荐