興味がある人は、データを動的にロードするように変更するか、jquery を使用すると、コードは確実に少なくなります。 CSS を追加すると、このツリーは静的ページで非常に便利であることがわかりました。 .expand{ cursor:pointer; } .hide{ cursor:pointer; } 定義リストをツリーに変換することもできます: メニュー 1 1.1 aaa 1.2 bbb 1.3ccc メニュー 2 2.1 こんにちは ハイパーリンク メニュー 3 3.1 百度ニュース 捜狐ニュース 3.2 百度ニュース 捜狐ニュース [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります] function toggleChild(o) { var cls = o.getAttribute("class"); if (cls == "expand") { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = "none"; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "hide"); if (window.innerWidth) //ff o.textContent = "田" + o.textContent.substring(1); else o.innerText = "田" + o.innerText.substring(1); } else { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style.display = ""; sb = sb.nextSibling; if (window.innerWidth) sb = sb.nextSibling; } o.removeAttribute("class"); o.setAttribute("class", "expand"); if (window.innerWidth) //ff o.textContent = "曰" + o.textContent.substring(1); else o.innerText = "曰" + o.innerText.substring(1); } } function maketree(obj) { var dts = obj.getElementsByTagName('dt'); for (var i = 0; i < dts.length; i++) { dts[i].setAttribute("class", "expand"); if (window.innerWidth) //ff dts[i].textContent = "曰" + dts[i].textContent; else dts[i].innerText = "曰" + dts[i].innerText; dts[i].onclick = function() { toggleChild(this); }; } } window.onload = function() { maketree(document.getElementById("tree")); };