インターネット上の多くのツリーの実装を探しているので、私はそれが満足のいくものではないといつも感じています。プラグインを使用するためにJS外部ファイルを参照する必要があるか、コードが多すぎると人々がめまいがする場合があります。実際、簡潔なコードと非表示ロジックを備えたツリーを実装したいだけです。あまり言いたくないし、コードに行きたくない：
1.最初にCSSスタイルを書くには、書かなければならないヘッダーが最初にレンダリングされます
コードコピーは次のとおりです。
<style>
.ps {margin-left：10px; display：none;}
.f {
背景：url（ "add.gif"）ノーリピートスクロール-4px -21px;
カーソル：ポインター;
高さ：35px;
ラインハイト：37px;
パディング左：20px;
}
</style>
2.ツリーの特定のコンテンツをページの本体に追加します。このコンテンツは動的に表示することもできます（ルールに基づいている限り、動的ディスプレイは簡単に実装できます。そのため、それを言う必要はありません。笑顔）
コードコピーは次のとおりです。
<div id = "sgc1">パスワードの変更</div>
<div id = "sgc2">製品の選択</div>
<div id = "sgc3" onclick = "w（ 'gc3'）">分類設定</div>
<div id = "gc3" style = "display：none">
<div id = "sfgc91" onclick = "k（ 'fgc91'）"> see </div>
<div id = "fgc91">
<div> set vustsee製品</div>
</div>
<div id = "sfgc93" onclick = "k（ 'fgc93'）"> spotlight </div>
<div id = "fgc93">
<div>スポットライト製品を設定</div>
</div>
<div id = "sfgc94" onclick = "k（ 'fgc94'）">デイリースペシャル</div>
<div id = "fgc94">
<div> DailySpecials製品を設定</div>
</div>
<div id = "sfgc95" onclick = "k（ 'fgc95'）"> hotcategory </div>
<div id = "fgc95">
<div> HotCategory分類を設定</div>
<div> HotCategory製品を設定</div>
</div>
<div id = "sfgc96" onclick = "k（ 'fgc96'）"> hot＆cool picks </div>
<div id = "fgc96">
<div>ホット＆クールなピック製品を設定</div>
</div>
<div id = "sfgc97" onclick = "k（ 'fgc97'）"> featuredcategorie </div>
<div id = "fgc97">
<div> featuredcategories </div>セット
<div> featuredcategories </div>セット
</div>
<div id = "sfgc98" onclick = "k（ 'fgc98'）">あなたも…</div>が好きかもしれません
<div id = "fgc98">
<div>あなたも好きかもしれません…カテゴリ</div>
<div>あなたも好きかもしれません…製品</div>
</div>
</div>
<div id = "sgc4" onclick = "w（ 'gc4'）">システム設定</div>
<div id = "gc4" style = "display：none">
<div>ユーザー管理</div>
</div>
3.ハイライトはこちらで、同じ靴に注意を払い、JSのツリーコントロールを実装します
コードコピーは次のとおりです。
関数w（vd）{
var ob = document.getElementById（vd）;
if（ob.style.display == "block" || ob.style.display == ""）{
ob.style.display = "none";
var ob2 = document.getElementById（ 's' + vd）;
ob2.style.background = "url（add.gif）-4px -21px no -repeat";
}
それ以外 {
ob.style.display = "block";
var ob2 = document.getElementById（ 's' + vd）;
ob2.style.background = "url（add.gif）-4px 4px no -repeat;";
}
}
関数K（VD）{
var ob = document.getElementById（vd）;
if（ob.style.display == "block"）{
ob.style.display = "none";
var ob2 = document.getElementById（ 's' + vd）;
ob2.style.background = "url（add.gif）-4px -21px no -repeat";
}
それ以外 {
ob.style.display = "block";
var ob2 = document.getElementById（ 's' + vd）;
ob2.style.background = "url（add.gif）-4px 4px no -repeat;";
}
}
4.実行中の図は次のとおりです。