Was ist ein Baum im Webdesign? Klicken Sie einfach auf einen Link, erweitern Sie das untere Verzeichnis und klicken Sie dann darauf, um sie anzuschließen. Dies ist der einfachste Baum. Wie implementiere ich es? Es ist auch sehr einfach. In CSS gibt es eine Eigenschaftsanzeige. Dies kann die Realität des Inhalts steuern, aber es wird immer noch nicht angezeigt. Anschließend können Sie die Eigenschaften von CSS über JS steuern. Siehe den folgenden Code:
<Div> Top -Verzeichnis </div>
<div id = Menulist>
<div> Menü 1 </div>
<div> Menü 2 </div>
<div> Menü 3 </div>
</div>
Dies wird als Prototyp des Baumes angesehen. Natürlich fügt der Anfangszustand das Anzeigeattribut von CSS hinzu. Die am häufigsten verwendeten Anzeigeattribute sind keine und Blockattribute.
Keiner wird nicht angezeigt, während Block wie ein Blocktypelement angezeigt wird. Dann schauen Sie sich den Code an
<Div> Top -Verzeichnis </div>
<div id = Menulist style = display: keine>
<div> Menü 1 </div>
<div> Menü 2 </div>
<div> Menü 3 </div>
</div>
Wenn Sie die Seite ausführen, zeigen Sie auf diese Weise nur das Verzeichnis der obersten Ebene an. Wenn Sie es steuern, müssen Sie JS -Code hinzufügen.
1. Holen Sie sich zuerst den Menulisten
var Menulist = document.getElementById (Menulist);
2. oder Sie können seine CSS -Eigenschaften nach diesem Objekt steuern
Menulist.Style.Display = Block;
Urteil hinzufügen
if (Menulist.Style.Display = Keine)
Menulist.Style.Display = Block;
anders
Menulist.Style.Display = Keine;
Auf diese Weise wird der originellste Baum generiert, der endgültige Code
<Script>
Funktionshowmenu ()
{
var Menulist = document.getElementById (Menulist);
if (Menulist.Style.Display == keine)
Menulist.Style.Display = Block;
anders
Menulist.Style.Display = Keine;
}
</script>
<div on
klicken = showMenu ();> Top -Verzeichnis </div>
<div id = Menulist style = display: keine>
<div> Menü 1 </div>
<div> Menü 2 </div>
<div> Menü 3 </div>
</div>
Lange Zeit habe ich nach dieser Methode Attributverzeichnisse erstellt. Unabhängig davon, wie komplex das Verzeichnis erstellt werden soll, wurde diese Methode ausprobiert. Der folgende Screenshot ist der Betriebseffekt eines relativ komplexen Baumverzeichnisses, das ich unter IE gemacht habe:
Das Schreckliche passierte unter Chrome und es war völlig durcheinander. Nach einigen Informationsabruf fand ich schließlich den Grund. Zusätzlich zu Block und keiner hat Anzeige viele andere Attribute. Block wird in Blöcken angezeigt. Ich wurde in einem Tisch darauf ausgelegt. Gott weiß, ob Tisch und Block einen tiefen Hass haben. Microsoft glaubte, dass es ihren Hass geschickt ignoriert, während Chrome den Standards immer noch sehr ehrlich befolgt. Firefox ist dasselbe, daher gibt es immer noch Probleme in ihren Erklärungen. So lösen Sie dieses Problem:
Die Anzeige verfügt auch über eine Eigentumstabelle-Zelle, was bedeutet, Inhalte in Form einer Tabelle zu rendern. Dies steht genau im Einklang mit meiner Verwendung einer Tabelle für das Layout. Das Folgende ist eine kompatible Darstellung der drei Browser:
Dh6
Chrome2
Firefox3.5