HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)

Was ist ein Baum im Webdesign? Einfach ausgedrückt: Wenn Sie auf einen Link klicken, wird das Unterverzeichnis erweitert, und wenn Sie erneut klicken, wird es geschlossen. Dies ist der einfachste Baum. Die Implementierung ist ebenfalls sehr einfach. In CSS gibt es eine Eigenschaftsanzeige, mit der gesteuert werden kann, ob der Inhalt angezeigt wird oder nicht. Anschließend können Sie JS verwenden, um die Eigenschaften von CSS zu steuern und dies zu erreichen. Siehe den folgenden Code:
<div>Verzeichnis der obersten Ebene</div>
<div id="Menüliste">
<div>Menü 1</div>
<div>Menü 2</div>
<div>Menü 3</div>
</div>
Dies ist der Prototyp des Baums. Natürlich fügt der Anfangszustand das CSS-Anzeigeattribut hinzu. Die am häufigsten verwendeten Anzeigeattribute sind „none“ und „block“.
None bedeutet keine Anzeige, während Block wie ein Blocktypelement angezeigt wird. Schauen wir uns den Code an
<div>Verzeichnis der obersten Ebene</div>
<div id="Menüliste" style="Anzeige:keine">
<div>Menü 1</div>
<div>Menü 2</div>
<div>Menü 3</div>
</div>
Auf diese Weise wird beim Ausführen der Seite nur das Verzeichnis der obersten Ebene angezeigt. Wenn Sie es steuern möchten, müssen Sie js-Code hinzufügen
1. Holen Sie sich zuerst die Menüliste
var Menüliste = document.getElementById("Menüliste");
2. Oder das Objekt kann seine CSS-Eigenschaften steuern
menulist.style.display="Block";
Urteil hinzufügen
wenn (menulist.style.display="keine")
menulist.style.display="Block";
anders
Menüliste.style.display="keine";
Auf diese Weise wird der primitivste Baum erzeugt und der endgültige Code
<Skript>
Funktion showmenu()
{
var Menüliste = document.getElementById("Menüliste");
wenn (menulist.style.display=="keine")
menulist.style.display="Block";
anders
Menüliste.style.display="keine";
}
</Skript>
<div auf
click="showmenu();">Top-Verzeichnis</div>
<div id="Menüliste" style="Anzeige:keine">
<div>Menü 1</div>
<div>Menü 2</div>
<div>Menü 3</div>
</div>
Lange Zeit habe ich diese Methode verwendet, um Eigenschaftsverzeichnisse zu erstellen. Egal, wie komplex das Verzeichnis war, diese Methode hat jedes Mal funktioniert. Der folgende Screenshot zeigt den laufenden Effekt eines komplexeren Baumverzeichnisses, das ich unter IE erstellt habe:

Etwas Schreckliches ist passiert. In Chrome sah alles durcheinander aus. Nach einiger Informationssuche habe ich endlich den Grund gefunden. Neben Block und None hat Display viele andere Attribute. Block wird in Blöcken angezeigt und ich habe Tabellen für das Layout verwendet. Gott weiß, ob Tabellen und Blöcke einen tiefen Hass haben. Microsoft hält es für klug, seinen Hass zu ignorieren, während Chrome sich immer noch ehrlich an die Standards hält, und das gilt auch für Firefox. Es gibt also immer noch ein Problem in ihrer Erklärung. So lösen Sie dieses Problem:
Display verfügt außerdem über eine Eigenschaft namens table-cell, die den Inhalt in Form einer Tabelle darstellt. Genau das möchte ich tun, wenn ich eine Tabelle für das Layout verwende. Im Folgenden sind die kompatiblen Darstellungen von drei Browsern aufgeführt:

IE6

Chrom2

Firefox 3.5

<<: Übertragung von Routing-Parametern für die Kommunikation von React-Komponenten (react-router-dom)

>>: Beispiel zum Ändern von Stilen über CSS-Variablen

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Artikel

Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

Eine gründliche Analyse der HTML-Sonderzeichen

So passen Sie Docker-Images mit Dockerfile an

Nutzungs- und Leistungsoptimierungstechniken für die Aggregatfunktion „count“ in MySQL

So drücken Sie relative Pfade in Linux aus

Mysql gibt die Methode zur Datumsbereichsextraktion an

MySQL slow_log-Tabelle kann nicht in InnoDB-Engine geändert werden – detaillierte Erklärung

Detaillierte Schritte zur Remotebereitstellung einer MySQL-Datenbank unter Linux

Tutorial zum Erstellen eines Zookeeper-Servers unter Windows

Artikel empfehlen

Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren

Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)

So nutzen Sie Partitionierung, um die MySQL-Datenverarbeitung für Milliarden von Daten zu optimieren

Erfahrungsaustausch zur Reparatur von MySQL InnoDB-Ausnahmen

Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

So setzen Sie das MySQL-Root-Passwort zurück

10 tödliche semantische Fehler in der Webtypografie

Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte

JS implementiert das Schlangenspiel

Theorie: Die zwei Jahre User Experience

Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur

Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten

Zusammenfassung der MySQL-Nutzungsspezifikationen

So lösen Sie das Problem, dass das Softwarepaket bei der Installation von Software unter Linux nicht vorhanden ist

Implementierung der TCPWrappers-Zugriffskontrolle in Centos