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

Vorgehensweise bei der Verwendung der MySQL-Systemdatenbank zur Diagnose der Leistungsbelastung

Erstellen eines sekundären Menüs mit JavaScript

Vorgehensweise bei der Verwendung der MySQL-Systemdatenbank zur Diagnose der Leistungsbelastung

So konfigurieren Sie WordPress mit Nginx

Das Vue-Projekt realisiert Anmelde- und Registrierungseffekte

Beispiel für das Einrichten einer Whitelist in Nginx mithilfe des Geomoduls

Vier praktische Tipps für JavaScript-String-Operationen

Einführung in die allgemeine API-Verwendung von Vue3

Implementierung von Zehntausenden gleichzeitigen Verbindungen auf einer einzigen Maschine mit nginx+lua

Tutorial zur Installation und Konfiguration von MySQL 5.7 unter CentOS7 (YUM)

Codebeispiel für die Verwendung der MySql COALESCE-Funktion

Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial

Artikel empfehlen

N Möglichkeiten, adaptive Teiler geschickt mit CSS zu implementieren

Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln

HTML-Zeichnungsbenutzer-Registrierungsseite

50 superpraktische Tools für Webdesigner

Eine kurze Diskussion über den Unterschied zwischen src und href in HTML

Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL

Eine kurze Diskussion über bedingte Kodierung und Seitenlayout der VUE-Uni-App

Warum verwendet der MySQL-Datenbankindex den B+-Baum?

Implementierung einer einfachen Login-Seite für das WeChat-Applet (mit Quellcode)

Reiner CSS3-Code zur Implementierung einer laufenden Uhr

Detaillierte Erklärung der Vue-Komponenten

Tutorial zur Konfiguration von SSH und Xshell für die Verbindung zum Server unter Linux (mit Bildern)

Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Welche Nachteile hat die Bereitstellung der Datenbank in einem Docker-Container?

So legen Sie die Tabellenbreite in IE8 und Chrome fest