原生js实现树形菜单

<ul id="treeMenu">
    <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>

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

#treeMenu .node {
    cursor: pointer;
}

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

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