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 |
>>: Beispiel zum Ändern von Stilen über CSS-Variablen
Artikel empfehlen
Der MySQL-Server wird mit der Option --skip-grant-tables ausgeführt.
Der MySQL-Server läuft mit der Option --skip-gran...
Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL
Es gibt drei Hauptmethoden der MySQL-Replikation:...
Detaillierte Erklärung zum manuellen Bereitstellen einer Remote-MySQL-Datenbank unter Linux
1. Installieren Sie MySQL. Führen Sie den folgend...
Vue+Swiper realisiert Timeline-Effekt
In diesem Artikel wird der spezifische Code von v...
Vue-Konfigurationsdetails für mehrere Seiten
Inhaltsverzeichnis 1. Der Unterschied zwischen me...
Detaillierte Erklärung zur Verwendung von Standard in MySQL
NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...
JavaScript-Grundlagenobjekte
Inhaltsverzeichnis 1. Gegenstand 1.1 Was ist ein ...
MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]
Inhaltsverzeichnis 1. Konzept 2. Umgebungsbeschre...
JS realisiert die automatische Wiedergabe der Timeline
Vor kurzem habe ich einen solchen Effekt implemen...
Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
Vor kurzem hat das Unternehmen zufällig Live-Über...
Zusammenfassung der schnellen Spaltenaddition bei MySQL 8.0 Online DDL
Inhaltsverzeichnis Problembeschreibung Historisch...
Detailliertes Tutorial zur Installation von MySQL 5.7.20 auf RedHat 6.5/CentOS 6.5
Laden Sie das RPM-Installationspaket herunter Off...
jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen
CSS-Operationen CSS $("").css(name|pro|...
Detaillierte Analyse, warum MySQL die Verwendung von UUID oder Snowflake-ID als Primärschlüssel nicht empfiehlt
Vorwort: Beim Entwerfen einer Tabelle in MySQL em...
Was muss ich tun, wenn ich einen fehlerhaften MySQL-Befehl abbrechen möchte?
Ich habe einen falschen MySQL-Befehl eingegeben u...