jquery树形菜单

jQuery树形菜单的实现方法

使用jQuery实现树形菜单通常需要结合HTML结构、CSS样式以及jQuery的事件处理功能。以下是几种常见的实现方式：

基于jQuery UI的树形菜单

jQuery UI提供了可折叠的树形结构组件，可以通过accordion或自定义方式实现：

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

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

自定义jQuery树形菜单

通过jQuery事件绑定实现展开/折叠功能：

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

<script>
$(document).ready(function(){
  $('.tree li:has(ul)').addClass('parent');
  $('.tree li.parent > span').on('click', function(){
    $(this).parent().toggleClass('active').children('ul').slideToggle();
  });
});
</script>

<style>
.tree li.parent > span { cursor: pointer; }
.tree li.parent > ul { display: none; }
.tree li.active > ul { display: block; }
</style>

使用jQuery插件

推荐使用专门的树形菜单插件如jstree：

1. 引入jsTree资源：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

2. 初始化树形结构：

   
   <div id="jstree">
   <ul>
    <li>根节点
      <ul>
        <li>子节点1</li>
        <li>子节点2</li>
      </ul>
    </li>
   </ul>
   </div>

$(function(){ $('#jstree').jstree(); }); ```

动态加载数据的树形菜单

通过AJAX动态加载节点数据：

$('#tree').jstree({
  'core' : {
    'data' : {
      'url' : '/api/get_nodes',
      'data' : function (node) {
        return { 'id' : node.id };
      }
    }
  }
});

树形菜单的常见功能扩展

• 添加复选框：

  $('#tree').jstree({
  "plugins" : ["checkbox"]
  });

• 右键上下文菜单：

  $('#tree').jstree({
  "plugins" : ["contextmenu"],
  "contextmenu" : {
    "items" : customMenu
  }
  });

• 拖放排序：

  

  $('#tree').jstree({
  "plugins" : ["dnd"]
  });

注意事项

1. 确保正确引入jQuery库（在插件之前引入）
2. 复杂树形结构建议使用专业插件如jsTree
3. 移动端需考虑触摸事件兼容性
4. 大数据量时采用懒加载模式
5. 注意z-index问题确保下拉菜单不被遮挡