jquery 下拉树菜单

基础概念

jQuery 下拉树菜单是一种基于 jQuery 的 UI 组件，用于在网页上展示层次结构的数据。它通常以树状结构显示，用户可以通过展开和折叠节点来浏览不同的数据层级。

类型

静态树菜单：数据在页面加载时就已经确定，不会动态变化。
动态树菜单：数据可以通过 AJAX 请求从服务器动态加载，适合数据量较大或需要实时更新的场景。

应用场景

文件管理系统：展示文件和文件夹的层次结构。
组织架构图：展示公司或组织的层级结构。
分类导航：在电商网站中展示商品的分类结构。

示例代码

以下是一个简单的 jQuery 下拉树菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 下拉树菜单示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
</head>
<body>
    <div id="tree"></div>

    <script>
        $(function() {
            $('#tree').jstree({
                'core': {
                    'data': [
                        {
                            "id": "node1",
                            "text": "节点1",
                            "children": [
                                { "id": "node1_1", "text": "子节点1-1" },
                                { "id": "node1_2", "text": "子节点1-2" }
                            ]
                        },
                        {
                            "id": "node2",
                            "text": "节点2",
                            "children": [
                                { "id": "node2_1", "text": "子节点2-1" }
                            ]
                        }
                    ]
                }
            });
        });
    </script>
</body>
</html>