jquery实现树形菜单完整代码

首先介绍一下jquery实现树形菜单的原理和步骤：

1. 在html中准备好容器，用于放置树形菜单；
2. 通过ajax请求或静态数据，获取树形结构的数据，可以是数组形式或json格式；
3. 遍历数据，根据层级关系，生成菜单的html代码，包括ul、li等元素；
4. 监听菜单项的点击事件，收缩/展开子菜单，并设置样式；
5. 将生成的菜单html代码插入到容器中。

下面展示完整的jquery实现树形菜单的代码：

HTML：

<div class="menu-container">
  <ul class="menu">
  </ul>
</div>

CSS：

.menu-container {
  width: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  line-height: 1.5;
}

.menu li a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #666;
}

.menu li.active > a {
  background-color: #eee;
}

.menu li ul {
  margin: 0;
  padding: 0;
  display: none;
}

.menu li.active > ul {
  display: block;
}

JS：

$(function () {
  var data = [
    {
      id: 1,
      label: "根节点",
      children: [
        {
          id: 2,
          label: "子节点 1",
          children: [
            {
              id: 3,
              label: "子节点 1-1"
            }
          ]
        },
        {
          id: 4,
          label: "子节点 2",
          children: [
            {
              id: 5,
              label: "子节点 2-1",
              children: [
                {
                  id: 6,
                  label: "子节点 2-1-1"
                }
              ]
            }
          ]
        }
      ]
    }
  ];

  // 生成菜单
  function generateMenu(data, parent) {
    $.each(data, function (index, item) {
      var li = $("<li>")
        .attr("data-id", item.id)
        .appendTo(parent);

      var a = $("<a>").text(item.label).appendTo(li);

      if (item.children && item.children.length > 0) {
        var ul = $("<ul>").appendTo(li);

        generateMenu(item.children, ul);
      }
    });
  }

  // 收缩/展开子菜单
  function toggleMenu(el) {
    var li = $(el).parent("li");

    if (li.hasClass("active")) {
      li.removeClass("active");
    } else {
      li.addClass("active");
    }
  }

  // 监听菜单项的点击事件
  $(document).on("click", ".menu li a", function (event) {
    event.preventDefault();

    toggleMenu(this);
  });

  // 生成菜单项
  generateMenu(data, $(".menu"));
});

这份代码中，先定义了一组数据，生成树形菜单时遍历该数据。通过 generateMenu 函数生成菜单html代码输出到容器中，同时设置了样式。

代码中使用了事件委托，监听菜单项的点击事件。点击菜单项后，通过调用 toggleMenu 函数收缩/展开子菜单，并设置样式。

下面给出一个使用ajax请求获取树形结构数据的示例：

$(function () {
  // 通过ajax请求获取树形结构数据
  $.ajax({
    url: "menu.json",
    dataType: "json"
  }).done(function (data) {
    // 生成菜单项
    generateMenu(data, $(".menu"));
  });

  // 其他代码同上
});

上面的代码中，通过ajax请求一份json格式的数据，获取数据后调用 generateMenu 函数生成菜单项。