原生js树形菜单代码

原生JavaScript实现的树形菜单代码通常涉及到DOM操作和事件处理。下面是一个简单的树形菜单示例，包括展开和折叠功能。

基础概念

DOM操作：Document Object Model，用于表示和操作HTML文档。
事件处理：监听用户的交互行为，如点击事件。

优势

性能：原生JavaScript不需要加载额外的库或框架，减少了页面加载时间。
灵活性：可以直接操作DOM，实现高度定制化的功能。

类型

静态树形菜单：菜单结构固定，不随用户交互改变。
动态树形菜单：菜单结构可以根据用户操作或数据变化而动态更新。

应用场景

网站导航：提供层次化的页面结构。
文件管理器：展示文件夹和文件的层级关系。
设置选项：复杂的配置选项通常以树形结构展示。

示例代码

以下是一个简单的树形菜单实现，包含展开和折叠功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tree Menu Example</title>
<style>
    ul {
        list-style-type: none;
        padding-left: 20px;
    }
    .hidden {
        display: none;
    }
</style>
</head>
<body>

<ul id="treeMenu">
    <li>
        <span class="toggle">+</span> Menu 1
        <ul class="hidden">
            <li>Submenu 1.1</li>
            <li>Submenu 1.2</li>
        </ul>
    </li>
    <li>
        <span class="toggle">+</span> Menu 2
        <ul class="hidden">
            <li>Submenu 2.1</li>
            <li>Submenu 2.2</li>
        </ul>
    </li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var toggles = document.querySelectorAll('.toggle');
    toggles.forEach(function(toggle) {
        toggle.addEventListener('click', function() {
            var submenu = this.nextElementSibling;
            if (submenu.classList.contains('hidden')) {
                submenu.classList.remove('hidden');
                this.textContent = '-';
            } else {
                submenu.classList.add('hidden');
                this.textContent = '+';
            }
        });
    });
});
</script>

</body>
</html>

解释

HTML结构：使用嵌套的<ul>和<li>元素来构建树形结构。
CSS样式：.hidden类用于控制子菜单的显示和隐藏。
JavaScript逻辑：
- 监听DOMContentLoaded事件，确保DOM完全加载后再执行脚本。
- 为每个.toggle元素添加点击事件监听器。
- 点击时切换相邻子菜单的.hidden类，并更新+或-符号。