Auf der Suche nach vielen Baumimplementierungen im Internet habe ich immer das Gefühl, dass es nicht zufriedenstellend ist. Entweder müssen Sie auf JS-externe Dateien verweisen, um Plug-Ins zu verwenden, oder zu viel Code macht Menschen schwindelig. Tatsächlich möchte ich nur einen Baum mit präziser Code und Complexex -Logik implementieren. Ich möchte nicht viel sagen und einfach zum Code gehen:
1. Schreiben Sie zuerst den CSS -Stil, der Header, der geschrieben werden muss, wird zuerst gerendert
Die Codekopie lautet wie folgt:
<Styles>
.ps {margin-links: 10px; Anzeige: keine;}
.F {
Hintergrund: URL ("add.gif") no -repeat scroll -4px -21px;
Cursor: Zeiger;
Höhe: 35px;
Zeilenhöhe: 37px;
Padding-Links: 20px;
}
</style>
2. Fügen Sie den spezifischen Inhalt des Baumes zum Hauptteil der Seite hinzu. Dieser Inhalt kann auch dynamisch angezeigt werden (die dynamische Anzeige ist einfach zu implementieren, solange er auf den Regeln basiert. Daher müssen Sie es nicht sagen. Lächeln).
Die Codekopie lautet wie folgt:
<div id = "sgc1"> Kennwortänderung </div>
<div id = "sgc2"> Produktauswahl </div>
<div id = "sgc3" onclick = "w ('gc3')"> Klassifizierungseinstellungen </div>
<div id = "gc3" style = "display: keine">
<div id = "sfgc91" onclick = "k ('fgc91')"> muss </div> sehen
<div id = "fgc91">
<Div> set mustsee products </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> Spotlight </div>
<div id = "fgc93">
<Div> Set Spotlight -Produkte </div>
</div>
<div id = "sfgc94" onclick = "k ('fgc94')"> Daily Specials </div>
<div id = "fgc94">
<Div> setze DailySpecials Products </div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> Hotcategory </div>
<div id = "fgc95">
<Div> Hotcategory -Klassifizierung </div> festlegen
<Div> Hotcategory -Produkte set </div>
</div>
<div id = "sfgc96" onclick = "k ('fgc96')"> Hot & Cool Picks </div>
<div id = "fgc96">
<Div> Set Hot & Cool Picks Produkte </div>
</div>
<div id = "sfgc97" onclick = "k ('fgc97')"> featuredCategorie </div>
<div id = "fgc97">
<Div> set featuredCategories </div>
<Div> set featuredCategories </div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> Sie mögen auch ... </div> mögen
<div id = "fgc98">
<Div> set, Sie könnten auch… Kategorie </div> mögen
<Div> set Ihnen vielleicht auch… Produkt </div>
</div>
</div>
<div id = "sgc4" onclick = "w ('gc4')"> Systemeinstellungen </div>
<div id = "gc4" style = "display: keine">
<Div> Benutzerverwaltung </div>
</div>
3. Das Highlight ist hier, achten Sie auf die gleichen Schuhe und implementieren Sie dann die Baumkontrolle von JS
Die Codekopie lautet wie folgt:
Funktion w (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block" || ob.style.display == "") {
ob.style.display = "Keine";
var ob2 = document.getElementById ('s' + vd);
ob2.Style.background = "url (add.gif) -4px -21px no -repeat";
}
anders {
Ob.Style.Display = "Block";
var ob2 = document.getElementById ('s' + vd);
ob2.Style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
Funktion k (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block") {
ob.style.display = "Keine";
var ob2 = document.getElementById ('s' + vd);
ob2.Style.background = "url (add.gif) -4px -21px no -repeat";
}
anders {
Ob.Style.Display = "Block";
var ob2 = document.getElementById ('s' + vd);
ob2.Style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
4. Das laufende Beispieldiagramm lautet wie folgt: