Natives JS zur Implementierung eines Dropdown-Menüs

Dropdown-Menüs sind auch im wirklichen Leben weit verbreitet. Der zu ihrer Implementierung verwendete JS-Code ist fast derselbe wie der für die Tab-Auswahl und das Akkordeon, daher werde ich hier nicht näher darauf eingehen.

Ich habe ein Dropdown-Menü auf Grundlage der offiziellen Website von Suning.com geschrieben. Der Implementierungscode lautet wie folgt:

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

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dropdown-Menü</title>
    <Stil>
        Körper,
        ul {
            Polsterung: 0;
            Rand: 0;
        }
        Körper{
            Hintergrundfarbe:#ccc;
        }
        li {
            Listenstil: keiner;
        }
        A{
            Textdekoration: keine;
        }
        ein:schweben{
            Farbe: RGB (235, 98, 35);
        }
        .nav {
            schweben: rechts;
            Rand oben: 10px;
            Rand rechts: 80px;
            Anzeige: Flex;
            Breite: 270px;
            Höhe: 100px;
        }
      
        .nav>li {
            Breite: 80px;
            Rand: 5px;
            Textausrichtung: zentriert;
        }
        .ausgewählt{
            Breite: 80px;
            Hintergrundfarbe: #fff;
            Farbe: RGB (235, 98, 35);
            Rand: 1px durchgezogener RGB (196, 194, 194);
        }
        .nav>li div:n-tes-Kind(1){
            Höhe: 30px;
            Zeilenhöhe: 30px; 
        }
        .nav>li div:nth-child(2){
            Anzeige: keine;
            Höhe: 160px;
            Breite: 80px;
            Hintergrundfarbe: #fff;
            Rand: 1px durchgezogener RGB (196, 194, 194);
            Rahmen oben: 1px durchgezogen #fff;
            Zeilenhöhe: 70px;
        }
        .nav>li>div:nth-child(2) li{
            Höhe: 40px;
            Zeilenhöhe: 40px;
        }
    </Stil>
</Kopf>

<Text>
    
    <ul Klasse="Navigation">
        <li>
            <div><a herf="#">Meine Bestellung</a></div>
            <div>
            <ul>
                <li><a herf="#">Zahlung steht aus</a></li>
                <li><a herf="#">Warten auf Versand</a></li>
                <li><a herf="#">Warten auf Lieferung</a></li>
                <li><a herf="#">Wartet auf Auswertung</a></li>
            </ul>
            </div>
        </li>    
        <li>
            <div><a herf="#">Mein Yigoo</a></div>
            <div>
                    <ul>
                            <li><a herf="#">Mein Second Hand</a></li>
                            <li><a herf="#">Mein Follow</a></li>
                            <li><a herf="#">Meine Finanzen</a></li>
                            <li><a herf="#">Suning-Mitglied</a></li>
                        </ul>
            </div>
        </li>
        <li>
            <div><a herf="#">Meine Homepage</a></div>
            <div>
                    <ul>
                            <li><a herf="#">Avatar</a></li>
                            <li><a herf="#">Spitzname</a></li>
                            <li><a herf="#">Unterschrift</a></li>
                            <li><a herf="#">Adresse</a></li>
                        </ul>
            </div>
        </li>
    </ul>
    <Skript>
        var s = document.querySelectorAll(".nav li div:nth-child(1)");
        var d = document.querySelectorAll(".nav li div:nth-child(2)");
        für(var i=0;i<s.Länge;i++){
            s[i].index=i;
            s[i].onmouseover=Funktion(){
                für(var j=0;j<s.Länge;j++){
                    s[j].Klassenname="";
                    d[j].style.display="keine";
                }
                this.className="ausgewählt";
                d[diesen.index].style.display="Block";
            }
        }
    </Skript>
   
</body>

</html>

Das Wirkungsdiagramm sieht wie folgt aus:

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:

Implementierungscode für JavaScript-Dropdown-Menüs
CSS+JS-Dropdown-Menü
js legt das standardmäßig ausgewählte Element im Dropdown-Menü dynamisch fest
JS-Implementierungscode für das dreistufige Dropdown-Menü
Ein JS-Implementierungscode für ein Datums-Dropdown-Menü
Echte mehrstufige Verknüpfungs-Dropdown-Menüklasse von JS. Einfache Realisierung des Verknüpfungsmenüs von Provinzen, Städten und Bezirken!
Beispiel für einen Js-Klick-Popup-Dropdown-Menüeffekt
Drei Möglichkeiten zur Implementierung des sekundären Dropdown-Menüs im Navigationsmenü in JS
JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs
js, um den Effektcode des kaskadierenden Dropdown-Menüs von Provinzen und Städten im ganzen Land zu erreichen

<<: Installations-Tutorial zur komprimierten Version von MySQL 8.0.20 mit Bildern und Text

>>: Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb

So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs

Natives JS zur Implementierung eines Dropdown-Menüs

So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs

Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann

Pull-Down-Aktualisierung und Pull-Up-Ladekomponenten basierend auf Vue-Kapselung

So lösen Sie das Phantomleseproblem in MySQL

Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code

MySQL führt SQL-Datei aus und meldet Fehler Fehler: Unbekannte Speicher-Engine „InnoDB“-Lösung

JavaScript-Grundlagen für Schleife und Array

Spezifische Verwendung von Bootstrap5-Haltepunkten und Containern

Schritte für Vue3 zur Verwendung von Mitt für die Komponentenkommunikation

Interpretieren von MySQL-Client- und Serverprotokollen

Artikel empfehlen

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

CSS verwendet die BEM-Namenskonvention

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

Was ist das Basis-Tag und was macht es?

Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers

Dockers flexible Implementierung zum Aufbau einer PHP-Umgebung

Schritte zur Methode „Mysql-Abfragedatenbankkapazität“

So behalten Sie den Inhalt im Container, wenn das Flex-Layout durch untergeordnete Elemente gestreckt wird

25 Vue-Tipps, die Sie kennen müssen

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

CSS zur Implementierung von Sprites und Schriftsymbolen

Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript