当前位置：首页 > jquery

jquery树形菜单

2026-02-03 16:58:28jquery

jQuery树形菜单实现方法

使用jQuery创建树形菜单可以通过多种方式实现，以下是常见的几种方法：

使用jQuery插件 jQuery Treeview是一个流行的插件，可以轻松创建可折叠的树形菜单。需要引入jQuery和Treeview插件文件，然后对HTML列表结构进行初始化。

<link rel="stylesheet" href="jquery.treeview.css" />
<script src="jquery.js"></script>
<script src="jquery.treeview.js"></script>

<ul id="tree">
  <li>父节点1
    <ul>
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>父节点2</li>
</ul>

<script>
  $("#tree").treeview({
    animated: "fast",
    collapsed: true
  });
</script>

手动实现树形菜单 如果不使用插件，可以通过jQuery事件绑定手动实现树形菜单的展开/折叠功能。

<ul class="tree">
  <li>
    <span class="toggle">+</span> 父节点
    <ul class="children">
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
</ul>

<script>
  $(".toggle").click(function() {
    $(this).text(function(i, text){
      return text === "+" ? "-" : "+";
    });
    $(this).siblings(".children").toggle();
  });
</script>

使用jQuery UI的Accordion jQuery UI的Accordion组件也可以用来创建类似树形菜单的效果。

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

<div id="accordion">
  <h3>父节点1</h3>
  <div>
    <p>子节点1</p>
    <p>子节点2</p>
  </div>
  <h3>父节点2</h3>
  <div>
    <p>子节点3</p>
  </div>
</div>

<script>
  $("#accordion").accordion({
    collapsible: true
  });
</script>

树形菜单样式优化

为树形菜单添加CSS样式可以改善视觉效果：

.tree ul {
  list-style: none;
  padding-left: 20px;
}
.tree li {
  margin: 5px 0;
  position: relative;
}
.toggle {
  cursor: pointer;
  margin-right: 5px;
}
.children {
  display: none;
}

动态加载树形数据

对于大型树形菜单，可以通过AJAX动态加载子节点：

$(".load-children").click(function() {
  var parent = $(this).parent();
  $.get("/api/tree/children", {id: parent.data("id")}, function(data) {
    var ul = $("<ul>").addClass("children");
    $.each(data, function(i, item) {
      ul.append($("<li>").text(item.name));
    });
    parent.append(ul);
  });
});

以上方法提供了不同复杂度的jQuery树形菜单实现方案，可以根据项目需求选择合适的实现方式。

jquery树形菜单