JavaScript三态树，是一种常用于网页中的交互元素，可以用于菜单树、分类树等多种场景。它的“三态”指的是树节点的三种状态：展开状态、折叠状态和部分展开状态。下面将详细介绍这三种状态。

一、展开状态

function expandNode(node) {
node.classList.remove("collapsed");
node.classList.add("expanded");
var children = node.getElementsByClassName("child-node");
for (var i = 0; i < children.length; i++) {
children[i].style.display = "block";
}
}

在展开状态下，节点会显示成树型结构的形式，所有子节点都会被显示出来。这时，我们可以通过点击节点上的“折叠”按钮将节点折叠起来，切换到折叠状态。

二、折叠状态

function collapseNode(node) {
node.classList.remove("expanded");
node.classList.add("collapsed");
var children = node.getElementsByClassName("child-node");
for (var i = 0; i < children.length; i++) {
children[i].style.display = "none";
}
}

在折叠状态下，节点会被显示成一个简单的条形标记，没有任何子节点内容显示。我们点击节点上的“展开”按钮将节点展开，切换到展开状态。

三、部分展开状态

function expandPartialNode(node, level) {
var children = node.getElementsByClassName("child-node");
for (var i = 0; i < children.length; i++) {
if (i < level) {
children[i].style.display = "block";
children[i].classList.add("expanded");
children[i].classList.remove("collapsed");
} else {
children[i].style.display = "none";
children[i].classList.add("collapsed");
children[i].classList.remove("expanded");
}
}
}

在部分展开状态下，节点某些子节点会被展开，而某些子节点则处于折叠状态。这时，我们可以点击节点上的“展开”按钮将部分子节点展开，而将其余的子节点折叠起来。假如我们需要展开二级节点附带的一级子节点时，调用函数 expandPartialNode(node, 2) 即可。

除了上述基本状态，我们还可以根据实际需求定义节点的更多状态，使得它们可以展示更多元素和信息。

总之，JavaScript三态树在实际使用中，可以提高网页的可读性和可交互性，让数据信息更清晰明了、易读易懂。本文所描述的三种状态是其核心部分，在使用过程中需要灵活应用。