<style>
ul {
    list-style-type: none;
    padding-left: 20px;
}

li {
    margin: 5px 0;
}

span {
    cursor: pointer;
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f9f9f9;
    display: inline-block;
}

span:hover {
    background-color: #e0e0e0;
}

/* 折叠/展开图标 */
span::before {
    content: "▶";
    margin-right: 5px;
    color: #666;
}

li.collapsed > span::before {
    content: "▼";
}

li.collapsed > ul {
    display: none;
}
</style>
    <ul id="tree">
        <li>
            <span>节点00</span>
        </li>
        <li>
            <span>节点 1</span>
            <ul>
                <li><span>子节点 1.1</span></li>
                <li><span>子节点 1.2</span>
                   <ul>
                    <li><span>子节点 1.1.1</span></li>
                    <li><span>子节点 1.2.2</span></li>
                    <li><span>子节点 1.2.3</span></li>
                  </ul>
                </li>
            </ul>
        </li>
        <li>
            <span>节点 2</span>
            <ul>
                <li><span>子节点 2.1</span></li>
                <li>
                    <span>子节点 2.2</span>
                    <ul>
                        <li><span>子节点 2.2.1</span></li>
                        <li><span>子节点 2.2.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tree = document.getElementById('tree');

    tree.addEventListener('click', function(event) {
        if (event.target.tagName === 'SPAN') {
            const parentLi = event.target.parentElement;
            parentLi.classList.toggle('collapsed');
        }
    });
});
</script>