Buscando muchas implementaciones de árboles en Internet, siempre siento que no es satisfactoria. O debe hacer referencia a los archivos externos JS para usar complementos, o demasiado código se marean a las personas. De hecho, solo quiero implementar un árbol con código conciso y lógica sin complejos. No quiero decir mucho y simplemente ir al código:
1. Primero escriba el estilo CSS, el encabezado que debe escribirse se presenta primero
La copia del código es la siguiente:
<estilo>
.ps {margen-izquierda: 10px; display: none;}
.f {
Antecedentes: URL ("add.gif") sin repetición de desplazamiento -4px -21px;
cursor: puntero;
Altura: 35px;
Línea de altura: 37px;
RODING-LUFE: 20px;
}
</style>
2. Agregue el contenido específico del árbol al cuerpo principal de la página. Este contenido también se puede mostrar dinámicamente (la pantalla dinámica es fácil de implementar siempre que se base en las reglas, por lo que no hay necesidad de decirlo. Sonríe)
La copia del código es la siguiente:
<div id = "sgc1"> modificación de contraseña </div>
<div id = "sgc2"> selección de productos </div>
<div id = "sgc3" onClick = "w ('gc3')"> Configuración de clasificación </div>
<div id = "gc3" style = "display: none">
<div id = "sfgc91" onClick = "k ('fgc91')"> Debe ver </div>
<div id = "fgc91">
<div> set mustsee productos </div>
</div>
<div id = "SFGC93" onClick = "K ('FGC93')"> Spotlight </iv>
<div id = "fgc93">
<div> establece productos de atención </div>
</div>
<div id = "SFGC94" onClick = "K ('FGC94')"> Especiales diarios </div>
<div id = "fgc94">
<div> set dailyspecials productos </div>
</div>
<div id = "SFGC95" onClick = "K ('FGC95')"> HotCategory </div>
<div id = "fgc95">
<div> Establecer clasificación de HotCategory </div>
<div> set de productos hotcategory </div>
</div>
<div id = "SFGC96" onClick = "K ('FGC96')"> Picks Hot & Cool </iv>
<div id = "fgc96">
<div> set Hot & Cool Picks Products </div>
</div>
<div id = "SFGC97" onClick = "K ('FGC97')"> STARIREDCATEGORIE </div>
<div id = "fgc97">
<div> set senceedCategories </div>
<div> set senceedCategories </div>
</div>
<div id = "SFGC98" onClick = "k ('fgc98')"> También te puede gustar ... </div>
<div id = "fgc98">
<div> set también puede que te guste ... categoría </div>
<div> set también puede gustar ... producto </div>
</div>
</div>
<div id = "sgc4" onClick = "w ('gc4')"> Configuración del sistema </div>
<div id = "gc4" style = "display: none">
<div> gestión de usuarios </div>
</div>
3. Lo más destacado es aquí, preste atención a los mismos zapatos e implementa el control de árbol de JS
La copia del código es la siguiente:
función w (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "bloque" || ob.style.display == "") {
ob.style.display = "Ninguno";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no repat";
}
demás {
ob.style.display = "bloque";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
función k (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "bloque") {
ob.style.display = "Ninguno";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no repat";
}
demás {
ob.style.display = "bloque";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
4. El diagrama de ejemplo de ejecución es el siguiente: