请实现一个复杂的树形结构组件，支持展开和折叠功能。

答题要点

实现一个复杂的树形结构组件，支持展开和折叠功能，可以使用 JavaScript 和 HTML/CSS 来完成。以下是一个基本的实现思路：首先，定义树形结构的数据。可以使用对象数组来表示树形结构，每个对象包含 `id`、`name` 和 `children` 等属性。例如： javascript const treeData = [ { id: 1, name: 'Root', children: [ { id: 2, name: 'Child 1', children: [] }, { id: 3, name: 'Child 2', children: [ { id: 4, name: 'Grandchild 1', children: [] } ] } ] } ]; 然后，使用 HTML 和 CSS 创建树形结构的样式。可以使用无序列表 `<ul>` 和列表项 `<li>` 来表示树形结构。为每个节点添加一个展开和折叠的按钮。接着，使用 JavaScript 实现展开和折叠功能。可以通过监听按钮的点击事件，切换节点的展开和折叠状态。例如： javascript function toggleNode(node) { const children = node.querySelector('ul'); if (children.style.display === 'none') { children.style.display = 'block'; } else { children.style.display = 'none'; } } 最后，递归地渲染树形结构。可以使用递归函数来遍历树形结构的数据，并生成相应的 HTML 元素。这样就可以实现一个复杂的树形结构组件，支持展开和折叠功能。