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

SQL implementiert Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen auf zwei benachbarten Datenzeilen

Erstellen eines sekundären Menüs mit JavaScript

SQL implementiert Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen auf zwei benachbarten Datenzeilen

Detaillierte Erläuterung des Dezimal-Padding-Problems des Dezimal-Datentyps in MySQL

JavaScript-Grundlagen: Geltungsbereich

Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden

Detaillierte Erläuterung des Organisationsstrukturdiagramms der Vue-Tree-Color-Komponente

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts

So implementieren Sie eine einfache Datenüberwachung mit JS

Nginx-Inhaltscache und allgemeine Parameterkonfigurationsdetails

Docker- und Portainer-Konfigurationsmethoden unter Linux

Artikel empfehlen

So verstehen Sie SELinux unter Linux

Tipps zum Erstellen von Webseiten für Mobiltelefone

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele

JS implementiert ein zufälliges Namensaufrufsystem

CSS3 zum Erzielen von Zeitleisteneffekten

Zusammenfassung zur Verwendung der Bootstrap-Tabelle

Redo-Dateiwartungsmethode der InnoDB-Engine

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Verwenden von vue3, um den Nebennachrichten-Eingabeaufforderungseffekt des Apple-Systems zu imitieren

Unterschiede zwischen FLOW CHART und UI FLOW

Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR

Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung