Erstellen eines sekundären Menüs mit JavaScript

In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Erzielung des sekundären Menüeffekts zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Das Wirkungsdiagramm dieser Implementierung ist wie folgt:

Die Wirkung dieses sekundären Menüs ist:

Beim Anklicken einer Box wird der Inhalt der geöffneten Box eingeklappt und der Inhalt der aktuell angeklickten Box aufgeklappt.

Wie also erzielen wir diesen Effekt?

Wir können Schritt für Schritt

1. Zuerst müssen wir den gesamten Rahmen anzeigen, das heißt, die Darstellung aller erweiterten Boxen, da die Anzeige/Nichtanzeige mit overflow:hidden erfolgt.
Aber seien Sie vorsichtig, dass Sie nicht für alle Felder denselben Feldtyp verwenden, da das beim Schreiben von JS-Code unpraktisch ist. Schließlich besteht unsere nächste Operation darin, auf das grüne Feld zu klicken => um das weiße Feld auszublenden oder auszuklappen, also müssen wir jeden Tag + das entsprechende Kursfeld unter ein übergeordnetes Div-Feld setzen. Initialisieren Sie es dann: Setzen Sie die Höhe gleich der Höhe von span, setzen Sie overflow:hidden , wie unten gezeigt, Sie können den folgenden Code kombinieren

2. Beginnen Sie dann mit dem Schreiben des JS-Teils: Stellen Sie sicher, dass sich der Zustand eines Kästchens von geschlossen auf erweitert ändert, wenn darauf geklickt wird. Unsere Box ist span. Wenn wir den gesamten Inhalt des übergeordneten Divs von span anzeigen möchten, müssen wir zuerst alle spans über document.getElementsByTagName("span") abrufen und dann eine for-Schleife verwenden, um die entsprechende übergeordnete Box über parentNode in der onclick Antwortfunktion jedes spans abzurufen, sodass die Höhe der übergeordneten Box dem Wert ihrer scrollHeight

3. Dann müssen wir das erweiterte Feld ausblenden, wenn wir auf „Span“ klicken, um ein Feld zu erweitern. Jetzt brauchen wir eine Variable, um das Feld aufzuzeichnen, auf das zuletzt geklickt wurde . Setzen Sie ihren Anfangswert auf null. Wenn „now“ nicht gleich der aktuell angeklickten Spanne ist , holen Sie sich das übergeordnete Feld von „now“, setzen Sie seine Höhe auf die Höhe der Spanne und erweitern Sie dann die aktuell angeklickte Spanne (im zweiten Punkt wurde bereits erklärt, wie man erweitert); wenn „now“ gleich der aktuell angeklickten Spanne ist , holen Sie sich die Höhe des übergeordneten Felds. Wenn sie gleich der Höhe der Spanne ist, setzen Sie ihre Höhe auf den Wert von scrollHeight , andernfalls setzen Sie sie auf die Höhe der Spanne.

4. Stellen Sie einen Timer ein und rufen Sie ihn auf, wenn Sie bereit sind, die Höhe des übergeordneten Felds zu erhöhen oder zu verringern. Wenn die Höhe des übergeordneten Felds die Höhe des Spans oder scrollHeight erreicht, schalten Sie den Timer aus (Sie können zwei Timer einstellen).

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }

        .container {
            Breite: 300px;
            Höhe: 700px;
            Rand: 100px automatisch;
        }

        .container div {
            Höhe: 43px;
            Überlauf: versteckt;
        }

        .container div span {
            Breite: 150px;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Rahmenradius: 15px;
            Anzeige: Block;
            Textausrichtung: zentriert;
            Hintergrundfarbe: rgba(104, 250, 201, 0,849);
            Cursor: Zeiger;
        }

        A {
            Breite: 150px;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Textdekoration: keine;
            Anzeige: Block;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Container">
        <div id="">
            <span id="one">Montag</span>
            Visualisierung
            Visualisierung
        </div>
        <div id="">
            Dienstag
            <a href="">Algorithmus-Design</a>
            <a href="">Grafiken</a>
            <a href="">Design Gruppenkursgestaltung</a>
            Betriebssystem
        </div>
        <div id="">
            <span id="three">Donnerstag</span>
            <a href="">Lage und Politik</a>
            Betriebssystem
        </div>
        <div id="">
            <span id="four">Freitag</span>
            <a href="">Algorithmus-Design</a>
        </div>
    </div>

    <Skript>
        let menu = document.getElementsByTagName("span");
        lass jetzt = null;
        für (lass i = 0; i < Menü.Länge; i++) {
            Menü[i].onclick = Funktion () {
                sei par = Menü[i].parentNode;
                wenn (jetzt === i) {
                    wenn (par.style.height === "43px") {
                        öffnen(par);
                    }
                    anders {
                        schließen(par);
                    }
                }
                anders {
                    wenn (jetzt !== null) {
                        schließen(Menü[jetzt].parentNode);
                    }
                    öffnen(par);
                    jetzt = ich;
                }
            }
        }

        Funktion öffnen(par) {
            lass Zeit = setzeIntervall(() => {
                sei num = par.offsetHeight;
                wenn (num >= Teil.Scrollhöhe) {
                    Intervall löschen(tem);
                }
                par.style.height = num + 1 + "px";
            }, 7);
        }

        Funktion schließen(par) {
            lass Zeit = setzeIntervall(() => {
                sei num = par.offsetHeight;
                wenn (Zahl <= 43) {
                    Intervall löschen(tem);
                    zurückkehren;
                }
                par.style.height = num - 1 + "px";
            }, 7);
        }

    </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Universeller sekundärer Menücode (CSS+JavaScript)
Implementieren Sie einfach js click, um die sekundäre Menüfunktion zu erweitern
Vue.js Beispielcode zum Anzeigen und Ausblenden des linken sekundären Menüs
Zeigen Sie sekundäre Menü-JS-Effekte an, wenn die Maus darüber fährt
js realisiert den Effekt des horizontalen Verschiebens des sekundären Menüs nach rechts
JavaScript-Maus darüber bewegen, um die Spezialeffekte des sekundären Menüs anzuzeigen
Vue.js realisiert den sekundären Menüeffekt
JS implementiert eine extrem vereinfachte Reaktion auf die Maus, um den sekundären Menücode anzuzeigen
js realisiert den Effekt der Anzeige des aktuellen Inhalts durch Klicken auf das sekundäre Menü
Ein Beispiel für ein ausblendbares sekundäres Menü, das mit JavaScript+CSS implementiert wurde

<<: CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

>>: Schritte zum Erstellen eines Docker-Images mit Dockerfile

So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux

Erstellen eines sekundären Menüs mit JavaScript

So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux

So fügen Sie auf dem Mac automatische Vervollständigungsbefehle für Docker und Kubectl hinzu

Beispielcode der Uniapp Vue- und NVUE-Karussellkomponenten

Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene

Detaillierte Erklärung der Eigenschaften und Instanzverwendung von hasOwnProperty in js

Detailliertes Tutorial zur Installation von SonarQube mit Docker

Alibaba Cloud ESC Server Docker-Bereitstellung von Single Node Mysql

Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration

So ändern Sie das Passwort in MySQL 5.7.18

Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfigurationsmethode (Bilder und Befehle)

Artikel empfehlen

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

Lösen Sie das Problem, dass IN-Unterabfragen in MySQL dazu führen, dass der Index unbrauchbar wird

CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]

Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine

Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac

Eine kurze Diskussion über Lösungen zum Stören von CSS3-Animationen

So installieren Sie Android x86 in einer virtuellen VMware-Maschine

Eine kurze Analyse der Probleme, auf die bei der Erstellung von 404-Fehlerseiten geachtet werden sollte

MySQL SHOW PROCESSLIST unterstützt den gesamten Prozess der Fehlerbehebung

Lassen Sie uns ausführlich über die gemeinsame MySQL-Abfrage sprechen

Verwendung der Vue3-Tabellenkomponente

Beispiel für eine adaptive CSS-Bildschirmgrößenimplementierung

So zeigen Sie in CocosCreator eine Textur an der Wischposition an

Zusammenfassung von 10 erweiterten Tipps für Vue Router