js树菜单

// 使用事件委托减少事件处理器的数量
document.getElementById('tree').addEventListener('click', function(event) {
    if (event.target.classList.contains('node')) {
        toggleNode(event.target);
    }
});

function toggleNode(node) {
    const childrenContainer = node.querySelector('.children');
    if (childrenContainer.style.display === 'none' || childrenContainer.style.display === '') {
        childrenContainer.style.display = 'block';
    } else {
        childrenContainer.style.display = 'none';
    }
}

function loadChildren(node) {
    const childrenContainer = node.querySelector('.children');
    if (childrenContainer.children.length === 0) {
        // 显示加载中的提示
        childrenContainer.innerHTML = '<span>Loading...</span>';
        
        fetch(`/api/children/${node.dataset.id}`)
            .then(response => response.json())
            .then(data => {
                // 清除加载中的提示并添加新节点
                childrenContainer.innerHTML = '';
                data.forEach(child => {
                    const childNode = document.createElement('div');
                    childNode.classList.add('node');
                    childNode.dataset.id = child.id;
                    childNode.textContent = child.name;
                    childrenContainer.appendChild(childNode);
                });
            });
    }
}

/* 确保树菜单的样式独立且不会被其他样式覆盖 */
#tree .node {
    cursor: pointer;
    padding-left: 20px;
}

#tree .children {
    display: none;
}