jQuery制作树形图（多级菜单）

以下是一个使用jQuery创建树形菜单的简单示例。这个示例假设你已经有了jQuery库的引用。

HTML:

<ul id="tree-menu">
  <li data-id="1">Item 1
    <ul>
      <li data-id="1.1">Item 1.1</li>
      <li data-id="1.2">Item 1.2
        <ul>
          <li data-id="1.2.1">Item 1.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li data-id="2">Item 2</li>
</ul>

CSS:

#tree-menu {
  list-style-type: none;
}
 
#tree-menu .expanded {
  display: block;
}
 
#tree-menu .collapsed {
  display: none;
}

jQuery:

$(document).ready(function() {
  $('#tree-menu').find('li').each(function() {
    var $this = $(this);
    var $childList = $this.find('ul:eq(0)');
 
    if ($childList.length) {
      $this.append('<span class="toggle">+</span>');
      
      $this.find('.toggle').on('click', function() {
        var $toggle = $(this);
        if ($toggle.text() === '+') {
          $toggle.text('-');
          $childList.removeClass('collapsed').addClass('expanded');
        } else {
          $toggle.text('+');
          $childList.removeClass('expanded').addClass('collapsed');
        }
      });
    }
  });
});

这段代码会为每个带有子列表的项添加一个切换按钮，点击后可以展开或收起子菜单。这是一个非常基础的实现，可以根据需要添加更多功能，例如动画效果、表单交互等。