À la recherche de nombreuses implémentations d'arbres sur Internet, je pense toujours que ce n'est pas satisfaisant. Soit vous devez faire référence à des fichiers externes JS pour utiliser des plug-ins, soit trop de code rend les gens étourdis. En fait, je veux juste implémenter un arbre avec du code concis et une logique non complexe. Je ne veux pas dire grand-chose et aller au code:
1. Écrivez d'abord le style CSS, l'en-tête qui doit être écrit est d'abord rendu
La copie de code est la suivante:
<style>
.ps {marge-gauche: 10px; affichage: aucun;}
.f {
Contexte: URL ("add.gif") Scroll sans répétition -4px -21px;
curseur: pointeur;
hauteur: 35px;
hauteur de ligne: 37px;
Padding-Left: 20px;
}
</ style>
2. Ajoutez le contenu spécifique de l'arbre au corps principal de la page. Ce contenu peut également être affiché dynamiquement (l'affichage dynamique est facile à implémenter tant qu'il est basé sur les règles, il n'est donc pas nécessaire de le dire. Souriez)
La copie de code est la suivante:
<div id = "sgc1"> Modification du mot de passe </v>
<div id = "sgc2"> Sélection de produit </div>
<div id = "sgc3" onclick = "w ('gc3')"> Paramètres de classification </div>
<div id = "gc3" style = "affichage: aucun">
<div id = "sfgc91" onclick = "k ('fgc91')"> doit voir </div>
<div id = "fgc91">
<div> Définir les produits Moustsee </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> Spotlight </div>
<div id = "fgc93">
<div> Définir les produits Spotlight </div>
</div>
<div id = "sfgc94" onclick = "k ('fgc94')"> spéciaux quotidiens </div>
<div id = "fgc94">
<div> Définir les produits Dailyspecials </div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> hotcategory </div>
<div id = "fgc95">
<div> Définir la classification HotCategory </div>
<div> Définir les produits HotCategory </div>
</div>
<div id = "sfgc96" onclick = "k ('fgc96')"> pics chauds et cool </div>
<div id = "fgc96">
<div> régler les produits Hot & Cool Picks </div>
</div>
<div id = "sfgc97" onclick = "k ('fgc97')"> en vedette de catégorie </div>
<div id = "fgc97">
<div> set en vedette de catégories </div>
<div> set en vedette de catégories </div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> Vous pourriez aussi aimer… </v>
<div id = "fgc98">
<div> Ensemble, vous pourriez aussi aimer… Catégorie </div>
<div> Ensemble, vous pourriez aussi aimer… Product </div>
</div>
</div>
<div id = "sgc4" onclick = "w ('gc4')"> Paramètres système </div>
<div id = "gc4" style = "affichage: aucun">
<div> Gestion des utilisateurs </div>
</div>
3. Le point culminant est ici, faites attention aux mêmes chaussures, puis mettez en œuvre le contrôle des arbres de JS
La copie de code est la suivante:
fonction w (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "Block" || ob.style.display == "") {
ob.style.display = "aucun";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no-repeat";
}
autre {
ob.style.display = "bloc";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no-repeat;";
}
}
fonction k (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "Block") {
ob.style.display = "aucun";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no-repeat";
}
autre {
ob.style.display = "bloc";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no-repeat;";
}
}
4. Le diagramme d'exemple en cours est le suivant: