如何将JSON动态插入到折叠菜单中？

将JSON动态插入到折叠菜单中的方法可以通过以下步骤实现：

首先，解析JSON数据，将其转换为JavaScript对象。可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象。
创建一个折叠菜单的HTML结构，可以使用HTML的<ul>和<li>标签来创建一个嵌套的列表结构。
遍历JavaScript对象中的数据，根据数据的层级关系动态生成折叠菜单的HTML代码。可以使用递归函数来处理多层级的数据。
在生成的HTML代码中，为每个菜单项添加点击事件，以实现展开和折叠的功能。可以使用JavaScript的事件监听器来监听菜单项的点击事件。
在点击事件的处理函数中，根据菜单项的状态（展开或折叠），动态修改菜单项的样式，并显示或隐藏子菜单。

以下是一个示例代码，演示了如何将JSON动态插入到折叠菜单中：

<!DOCTYPE html>
<html>
<head>
  <style>
    .menu-item {
      cursor: pointer;
      font-weight: bold;
    }
    .submenu {
      display: none;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <div id="menu"></div>

  <script>
    // JSON数据
    var jsonData = {
      "menu": [
        {
          "name": "菜单1",
          "submenu": [
            {
              "name": "子菜单1-1"
            },
            {
              "name": "子菜单1-2"
            }
          ]
        },
        {
          "name": "菜单2",
          "submenu": [
            {
              "name": "子菜单2-1"
            },
            {
              "name": "子菜单2-2",
              "submenu": [
                {
                  "name": "子菜单2-2-1"
                },
                {
                  "name": "子菜单2-2-2"
                }
              ]
            }
          ]
        }
      ]
    };

    // 解析JSON数据
    var menuData = JSON.parse(JSON.stringify(jsonData));

    // 生成折叠菜单的HTML代码
    function generateMenu(menuData, parentElement) {
      var ul = document.createElement("ul");
      parentElement.appendChild(ul);

      menuData.forEach(function(item) {
        var li = document.createElement("li");
        var span = document.createElement("span");
        span.className = "menu-item";
        span.textContent = item.name;
        li.appendChild(span);
        ul.appendChild(li);

        if (item.submenu && item.submenu.length > 0) {
          generateMenu(item.submenu, li);
        }
      });
    }

    // 点击事件处理函数
    function toggleMenu(event) {
      var submenu = event.target.nextElementSibling;
      if (submenu) {
        submenu.style.display = (submenu.style.display === "none") ? "block" : "none";
      }
    }

    // 渲染折叠菜单
    var menuElement = document.getElementById("menu");
    generateMenu(menuData.menu, menuElement);

    // 添加点击事件监听器
    var menuItems = document.getElementsByClassName("menu-item");
    Array.prototype.forEach.call(menuItems, function(item) {
      item.addEventListener("click", toggleMenu);
    });
  </script>
</body>
</html>

这个示例代码会根据给定的JSON数据生成一个折叠菜单，并且支持多层级的菜单项。点击菜单项时，会展开或折叠对应的子菜单。你可以根据实际需求修改JSON数据和样式，以适应你的项目。