js+树形菜单效果

<ul id="treeMenu">
    <li>
        <span class="toggle">+</span> <span class="menu-label">菜单1</span>
        <ul class="sub-menu">
            <li><span class="menu-label">子菜单1-1</span></li>
            <li><span class="menu-label">子菜单1-2</span></li>
        </ul>
    </li>
    <li>
        <span class="toggle">+</span> <span class="menu-label">菜单2</span>
        <ul class="sub-menu">
            <li><span class="menu-label">子菜单2-1</span></li>
            <li>
                <span class="toggle">+</span> <span class="menu-label">子菜单2-2</span>
                <ul class="sub-menu">
                    <li><span class="menu-label">子菜单2-2-1</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

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

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

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

document.addEventListener('DOMContentLoaded', function() {
    var toggles = document.querySelectorAll('.toggle');

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