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三態樹在實際使用中，可以提高網頁的可讀性和可交互性，讓數據信息更清晰明了、易讀易懂。本文所描述的三種狀態是其核心部分，在使用過程中需要靈活應用。