Natives JS zur Implementierung eines Dropdown-Menüs

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

Artikel empfehlen

So konfigurieren Sie Eureka im Docker

Heureka: 1. Erstellen Sie ein JDK-Image Starten S...

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

Erstens: über Text/HTML var txt1="<h1>...

Schritte zum Kapseln von Element-UI-Popupkomponenten

Kapseln Sie el-dialog als Komponente ein Wenn wir...

Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

Inhaltsverzeichnis Zu lang zum Lesen Isolierung d...

Verwenden von js, um den Effekt eines Karussells zu erzielen

Lassen Sie uns heute darüber sprechen, wie Sie mi...

Detaillierte Erläuterung des Beispiels einer MySQL-Einzeltabellenabfrage

1. Daten vorbereiten Die folgenden Operationen we...

Detaillierte Erläuterung des Problems der Übereinstimmung, selbst wenn in der MySQL-Abfragebedingung am Ende der Zeichenfolge ein Leerzeichen steht

1. Tabellenstruktur TABELLE person Ausweis Name 1...

Lösen Sie das Problem der Randzusammenführung

1. Die Ränder von Geschwisterelementen zusammenfü...

Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)

Inhaltsverzeichnis 1. Kommunikation zwischen Elte...

JavaScript-Code zum Erzielen eines einfachen Kalendereffekts

In diesem Artikel wird der spezifische Code für J...

Auszeichnungssprache - Anker

Zurück: Markup Language - Phrasenelemente Original...

Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode

Da Uniapp nicht über eine autorisierte DingTalk-A...

Mysql-Operation zum Abrufen von Tabellenkommentarfeldern

Ich werde nicht viel Unsinn erzählen, schauen wir...

So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub

Heute zeigen wir Ihnen, wie Sie das lokale Docker...

Vue implementiert ein Beispiel für eine verschachtelte Routing-Methode

1. Verschachteltes Routing wird auch als Sub-Rout...