¿Qué es un árbol en el diseño web? Simplemente coloque, haga clic en un enlace, expanda el directorio inferior y luego haga clic en él para unirse. Este es el árbol más simple. ¿Cómo implementarlo? También es muy simple. Hay una pantalla de propiedad en CSS. Esto puede controlar la realidad del contenido, pero aún no se muestra. Luego puede controlar las propiedades de CSS a través de JS., Consulte el siguiente código:
<div> Directorio superior </div>
<Div ID = Menulist>
<Div> Menú 1 </div>
<Div> Menú 2 </div>
<Div> Menú 3 </div>
</div>
Esto se considera un prototipo del árbol. Por supuesto, el estado inicial agrega el atributo de visualización de CSS. Los atributos de visualización más utilizados son NINGUNOS y ATRIBUTOS DE BLOQUE.
Ninguno no se muestra, mientras que el bloque se muestra como un elemento de tipo de bloque. Luego mira el código
<div> Directorio superior </div>
<div id = Menulist Style = Display: Ninguno>
<Div> Menú 1 </div>
<Div> Menú 2 </div>
<Div> Menú 3 </div>
</div>
De esta manera, si ejecuta la página, solo mostrará el directorio de nivel superior. Si lo controla, debe agregar el código JS.
1. Obtenga el menulista primero
var menulist = document.getElementById (menulist);
2. O puede controlar sus propiedades CSS después de este objeto
menulist.style.display = block;
Agregar juicio
if (menulist.style.display = none)
menulist.style.display = block;
demás
menulist.style.display = none;
De esta manera, se genera el árbol más original, el código final
<script>
función showmenu ()
{
var menulist = document.getElementById (menulist);
if (menulist.style.display == ninguno)
menulist.style.display = block;
demás
menulist.style.display = none;
}
</script>
<div on
click = showmenu ();> Directorio superior </div>
<div id = Menulist Style = Display: Ninguno>
<Div> Menú 1 </div>
<Div> Menú 2 </div>
<Div> Menú 3 </div>
</div>
Durante mucho tiempo, solía hacer directorios de atributos de acuerdo con este método. No importa cuán complejo se haga el directorio, este método ha sido probado y probado. La siguiente captura de pantalla es el efecto de operación de un directorio de árbol relativamente complejo que hice en IE:
Lo terrible sucedió bajo Chrome y estaba completamente desordenado. Después de una recuperación de información, finalmente encontré la razón. Además de Block y None, la pantalla tiene muchos otros atributos. El bloque se muestra en bloques. Fui presentado en una mesa. Dios sabe si Table y Block tienen un odio profundo. Microsoft pensó que estaba ignorando hábilmente su odio, mientras que Chrome aún obedeció los estándares muy honestamente. Firefox es lo mismo, por lo que todavía hay problemas en sus explicaciones. Cómo resolver este problema:
Display también tiene una celda de la tabla de propiedades, lo que significa representar contenido en forma de tabla. Esto está exactamente en línea con mi uso de una tabla para el diseño. La siguiente es una representación compatible de tres navegadores:
IE6
Chrome2
Firefox3.5