js树形菜单样式

在JavaScript中实现树形菜单样式，通常涉及到HTML、CSS以及JavaScript的基本知识。以下是关于树形菜单样式的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

树形菜单是一种用户界面元素，它以树状结构展示数据，每个节点可以有零个或多个子节点。在Web开发中，树形菜单常用于展示具有层级关系的数据，如文件系统、组织结构等。

优势

清晰展示层级关系：树形菜单能直观地展示数据的层级结构。
易于导航：用户可以通过展开和折叠节点快速定位所需信息。
节省空间：通过折叠不相关的节点，可以在有限的空间内展示大量数据。

类型

静态树形菜单：数据在页面加载时就已经确定，不会动态变化。
动态树形菜单：数据可以动态加载，例如通过Ajax请求从服务器获取子节点数据。

应用场景

文件管理系统
组织结构图
分类目录
技术文档导航

实现示例

以下是一个简单的静态树形菜单实现示例：

HTML

<ul id="tree-menu">
    <li>
        <span class="toggle">+</span> 节点1
        <ul class="sub-menu">
            <li>子节点1-1</li>
            <li>子节点1-2</li>
        </ul>
    </li>
    <li>
        <span class="toggle">+</span> 节点2
        <ul class="sub-menu" style="display:none;">
            <li>子节点2-1</li>
            <li>子节点2-2</li>
        </ul>
    </li>
</ul>

CSS

#tree-menu .toggle {
    cursor: pointer;
    margin-right: 5px;
}

#tree-menu .sub-menu {
    list-style-type: none;
    padding-left: 20px;
}

JavaScript

document.querySelectorAll('#tree-menu .toggle').forEach(function(toggle) {
    toggle.addEventListener('click', function() {
        var subMenu = this.nextElementSibling;
        if (subMenu.style.display === 'none' || subMenu.style.display === '') {
            subMenu.style.display = 'block';
            this.textContent = '-';
        } else {
            subMenu.style.display = 'none';
            this.textContent = '+';
        }
    });
});