使用js实现树状菜单

树状菜单是一种常见的用户界面元素，用于展示层次结构的数据。在JavaScript中实现树状菜单可以通过多种方式，包括使用递归、DOM操作和事件处理。下面是一个简单的示例，展示如何使用JavaScript和HTML实现一个基本的树状菜单。

基础概念

树状菜单通常由节点组成，每个节点可以有子节点。用户可以展开或折叠节点以查看或隐藏其子节点。这种结构有助于组织和导航复杂的数据集。

实现步骤

HTML结构：创建一个基本的HTML结构来表示树状菜单。
CSS样式：添加一些基本的CSS样式来美化菜单并控制展开/折叠效果。
JavaScript逻辑：编写JavaScript代码来处理节点的展开和折叠。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="treeMenu">
        <ul>
            <li>
                <span class="node">Node 1</span>
                <ul>
                    <li><span class="node">Node 1.1</span></li>
                    <li><span class="node">Node 1.2</span></li>
                </ul>
            </li>
            <li>
                <span class="node">Node 2</span>
                <ul>
                    <li><span class="node">Node 2.1</span></li>
                    <li><span class="node">Node 2.2</span>
                        <ul>
                            <li><span class="node">Node 2.2.1</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

#treeMenu ul {
    list-style-type: none;
    padding-left: 20px;
}

.node {
    cursor: pointer;
}

.node::before {
    content: "+ ";
}

.node.expanded::before {
    content: "- ";
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const nodes = document.querySelectorAll('.node');

    nodes.forEach(node => {
        node.addEventListener('click', function(event) {
            event.stopPropagation();
            const ul = this.nextElementSibling;
            if (ul && ul.tagName === 'UL') {
                ul.style.display = ul.style.display === 'none' || ul.style.display === '' ? 'block' : 'none';
                this.classList.toggle('expanded');
            }
        });
    });
});

优势

清晰的层次结构：树状菜单能够清晰地展示数据的层次关系。
用户友好：用户可以通过简单的点击操作展开或折叠节点，便于导航。
灵活性：可以轻松地添加、删除或修改节点，适应不同的数据需求。

应用场景

文件管理系统：展示文件夹和文件的层次结构。
组织架构图：展示公司或团队的层级关系。
设置菜单：在软件或网站中提供多层次的设置选项。

可能遇到的问题及解决方法

性能问题：如果树状菜单非常庞大，可能会影响页面性能。可以通过懒加载（只在需要时加载子节点）来优化性能。
样式冲突：确保CSS选择器具有足够的特异性，以避免与其他样式冲突。
事件冒泡：使用event.stopPropagation()防止点击事件冒泡到父元素，导致不必要的展开/折叠操作。

通过上述步骤和代码示例，你可以实现一个基本的树状菜单。根据具体需求，你可以进一步扩展和定制功能。

页面内容是否对你有帮助？

有帮助

没帮助

子类别下拉菜单

是否可以创建一个嵌套菜单，以便当我单击父类别时，子类别会在父类别下面滚动/下拉？

浏览 0提问于2018-02-22得票数 0

2回答

Chartjs树状图示例

、、、、

我目前在我的项目中使用chart.js，我不得不说它是一个令人惊叹的库。然而，我最近意识到我还需要一个“树状地图”，我在他们的网站上找不到。有没有人用chart.js实现了一个树状地图的例子？

浏览 1提问于2017-05-24得票数 8

回答已采纳

4回答

如何用jquery实现树状菜单

、、、

我想为这个例子实现树菜单。首先，所有的一切都必须关闭。当我们点击设施，Bulidngs必须显示为intree格式，然后，如果我们点击XYZ建筑楼层必须附加。就像那样..。children('ul.subtree');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

浏览 9提问于2016-10-03得票数 1

回答已采纳

2回答

Sass和组合子选择器

、、

在我的网站中，我使用 (E > F)实现了一个树状导航菜单。有没有办法在Sass中用更简单(或更好)的语法重写这段代码？

浏览 20提问于2011-09-08得票数 133

回答已采纳

1回答

用javascript制作绘图树状图

、、、、

我想用plotly.js制作。有可能吗？有人用javascript实现过树状图吗？

浏览 13提问于2016-08-06得票数 4

2回答

AngularJS ng-repeat和jQuery折叠

、、、

我正在尝试使用AngularJS ng-repeat和jQuery accordion小部件创建一个折叠树状菜单。{{item.ItemLabel}} </ul> </div> collapsible: true,

浏览 0提问于2014-06-17得票数 0

1回答

MOODLE :：自定义树菜单块

我正在使用moodle2.8。我们可以创建自定义树状菜单样式使用块。或者，我们是否可以使用默认的html块添加自定义树样式菜单项，因为html编辑器具有有序和无序列表样式，但我们没有树样式。

浏览 1提问于2014-11-25得票数 0

2回答

如何使用方格生成树状图

、、

我目前正在试验d3.js的图库树状图。现在我想知道我是否能让树状地图把所有的物品都渲染成正方形。我只能让它渲染矩形。我尝试使用.mode("squarify");，但这并不会导致所需的布局。它不会使用所有可用的空间并不重要。我只想让它呈现正方形。

浏览 5提问于2013-01-16得票数 7

3回答

如何从母窗体继承窗体和访问控制？

我正在写我的项目，我遇到了这个问题:我试图写一个库，我想在我的应用程序中使用它。在图书馆，我有一个表单与菜单条，工具栏，列表视图，树状视图等。库中的一切都受到保护。我可以使用VS2008中的设计器面板在列表视图和树状视图中更改和添加新功能，但我不能访问菜单条和工具栏，即使它们是受保护的。为什么会这样呢？我将非常感谢你的一些建议。

浏览 1提问于2010-06-13得票数 0

3回答

发布到web服务器后立即出现CSSFriendly问题

、、、

我创建了一个网站，并使用css友好的菜单，TreeView和GridView适配器，一切都是正确的，但在它发布到我伟大的网络服务器后，菜单和树状视图没有加载，只有一些项目符号！这是我的工作： (死链接) 左边我有一个没有加载的菜单。

浏览 0提问于2009-07-20得票数 3

回答已采纳

1回答

如何在codebehind中引用选中的菜单项？

、、

当我单击菜单树项目时，我希望引用控件中菜单项的名称。如何获取对所选菜单项的引用？我可以获得对菜单项所在的内容文件夹的引用，但不能获得对所选项目的引用。如果你能回答，请告诉我。谢谢!我使用的是Sitecore 6.2SttherKit，它将内容组织到页面左侧的树状视图中。当我单击树状视图中的一个项目时，将加载一个新页面，其中包含我的自定义用户控件。

浏览 1提问于2010-11-05得票数 0

回答已采纳

1回答

该图像表示数据Im从SQL2008通过网络服务到一个WPF应用程序，以树状视图表示，具有三个级别(两个下拉菜单).For为此，我将不得不使用Bill_id (树状视图中的第一个级别)，然后是product_id(树状视图中的第二个级别)，然后是option_id (第三个级别)对此数据进行分组。目前，我还不知道是否可以使用linq或其他工具像这样对数据进行分组。或者这是不是正确的方法。我对分层数据不是很在行。任何类型的建议或示例代码都将不胜感激

浏览 1提问于2016-05-11得票数 0

4回答

分类图，生命之树，分类，JS还是画布？

、、、、

优秀的人-我需要一些帮助，以找到一种方法来创建一个交互式的cladogram或系统发育树(是的，我已经阅读了所有相关的帖子，但没有找到我正在寻找的)。问题是，我需要这些节点的名字。一个例子是这样的我发现的大多数脚本要么是applet、flash，要么就是没有显示节点分类，即在本例中跳过"feliformia“。这对我来说是没用的，因为我最终会变成食肉动物--匿名的节点老虎，这不是好事。所以:没有闪光灯，没有小程序。它必须是水平的，没有超级树(圆形)。我已经看过这个，但是它们中的

浏览 0提问于2011-11-17得票数 6

回答已采纳

2回答

使用从基于javascript的选择菜单中选择的值

、、

我正在使用jQuery插件在我闪亮的应用程序中显示一个树状的选择菜单。我在检索要在某些输出中使用的值(例如c("Item 2", "Item 2-1"))时遇到了问题。因此，这里的问题是检索从select菜单($("example").val();)中选择的任何值。ui.r fluidPage( tags$script(src = "comb

浏览 2提问于2018-11-28得票数 1

回答已采纳

5回答

上下文(右键单击)菜单是用户执行特定任务的唯一方式，这是错误的吗？

我想知道在一个软件中提供一些功能是否有意义，该软件只能通过上下文(右键单击)菜单对用户可用。似乎在我使用过的大多数软件中，右键菜单都是用来快速访问其他按钮或菜单所提供的功能的。右侧的树状视图显示了用户的目录库。用户可以创建新目录，也可以在其库中添加和删除现有目录。然后，可以打开或关闭其库中的目录，或将其设置为只读。屏幕截图显示了我为浏览器创建的上下文菜单。目前，窗口顶部的"Catalog“菜单看起来与此上下文菜单相同。然而，我认为

浏览 12提问于2010-06-15得票数 9

回答已采纳

1回答