首页帮我用html + css + js 写一个可以展开收缩还可以选择的树型结构

帮我用html + css + js 写一个可以展开收缩还可以选择的树型结构

时间: 2024-01-14 07:05:23 浏览: 84

当然！以下是一个示例，使用 HTML、CSS 和 JavaScript 创建一个可以展开收缩并且可以选择的树形结构： ```html <!DOCTYPE html> <html> <head> <style> /* 树节点的样式 */ .tree-node { margin-left: 20px; cursor: pointer; } /* 树节点的连接线 */ .tree-connector { position: absolute; border-left: 1px solid #ccc; height: 100%; left: -20px; } </style> </head> <body> <div id="tree"> <ul> <li class="tree-node" onclick="toggleNode(this)"> <span>Root</span> <ul> <li class="tree-node" onclick="toggleNode(this)"> <span>Child 1</span> <ul> <li><input type="checkbox" class="tree-checkbox">Grandchild 1</li> <li><input type="checkbox" class="tree-checkbox">Grandchild 2</li> </ul> </li> <li><input type="checkbox" class="tree-checkbox">Child 2</li> <li class="tree-node" onclick="toggleNode(this)"> <span>Child 3</span> <ul> <li><input type="checkbox" class="tree-checkbox">Grandchild 3</li> </ul> </li> </ul> </li> </ul> </div> <script> // 展开/收缩节点 function toggleNode(node) { const childUl = node.querySelector('ul'); if (childUl) { childUl.style.display = childUl.style.display === 'none' ? 'block' : 'none'; } } </script> </body> </html> ``` 这个示例创建了一个带有展开收缩功能和可选择节点的树形结构。每个节点都使用 `<li>` 标签表示，并使用 `<ul>` 标签嵌套子节点。点击每个节点时，通过 JavaScript 的 `onclick` 事件触发 `toggleNode()` 函数来展开或收缩子节点。同时，每个节点下方有一个复选框，可以选择或取消选择该节点。你可以根据自己的需求修改这个示例，添加更多节点或自定义样式。希望能对你有所帮助！

阅读全文