帮我用html + css + js 写一个树结构
时间: 2024-01-15 10:02:33 浏览: 27
当然可以!以下是一个简单的示例,使用 HTML、CSS 和 JavaScript 创建一个树形结构:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 树节点的样式 */
.tree-node {
margin-left: 20px;
}
/* 树节点的连接线 */
.tree-connector {
position: absolute;
border-left: 1px solid #ccc;
height: 100%;
left: -20px;
}
</style>
</head>
<body>
<div id="tree">
<ul>
<li>Root
<ul>
<li>Child 1
<ul>
<li>Grandchild 1</li>
<li>Grandchild 2</li>
</ul>
</li>
<li>Child 2</li>
<li>Child 3
<ul>
<li>Grandchild 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
// 递归函数,为每个节点添加连接线
function addConnectors(node) {
if (node.children.length > 0) {
for (let i = 0; i < node.children.length; i++) {
const childNode = node.children[i];
const connector = document.createElement('div');
connector.classList.add('tree-connector');
childNode.prepend(connector);
addConnectors(childNode);
}
}
}
// 获取根节点并调用递归函数
const root = document.querySelector('#tree > ul > li');
addConnectors(root);
</script>
</body>
</html>
```
这个示例创建了一个简单的树形结构,其中包含一个根节点和几个子节点。每个节点都使用 `<li>` 标签表示,并使用 `<ul>` 标签嵌套子节点。CSS 样式定义了节点的缩进和连接线的样式。JavaScript 代码通过递归遍历树并为每个节点添加连接线。
你可以根据自己的需求修改这个示例,添加更多节点或自定义样式。希望能对你有所帮助!