js实现节点操作展开收起
时间: 2023-09-03 07:13:28 浏览: 56
可以通过给节点添加一个状态属性,然后根据状态属性来判断节点应该是展开还是收起状态。当点击节点时,切换节点的状态属性,并根据状态属性来进行相应的节点展开或收起操作。
以下是一个简单的实现示例:
HTML结构:
```
<ul>
<li class="node">
<span class="toggle">+</span>
<span class="text">节点1</span>
<ul class="children">
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
<li class="node">
<span class="toggle">+</span>
<span class="text">节点2</span>
<ul class="children">
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
</ul>
```
CSS样式:
```
ul {
list-style: none;
}
.node .toggle {
display: inline-block;
width: 20px;
text-align: center;
cursor: pointer;
}
.node .text {
margin-left: 5px;
}
.children {
display: none;
}
```
JS代码:
```
// 获取所有节点
var nodes = document.querySelectorAll('.node');
// 对每个节点进行处理
nodes.forEach(function(node) {
// 获取节点的toggle和children元素
var toggle = node.querySelector('.toggle');
var children = node.querySelector('.children');
// 初始状态为收起
var isExpanded = false;
// 点击toggle切换状态
toggle.addEventListener('click', function() {
if (isExpanded) {
children.style.display = 'none';
toggle.innerText = '+';
isExpanded = false;
} else {
children.style.display = 'block';
toggle.innerText = '-';
isExpanded = true;
}
});
});
```
这样,当用户点击节点的toggle时,就会切换节点的展开和收起状态,并相应地展开或收起节点的子节点。