JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

In diesem Artikel wird der spezifische Code für JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Manchmal wird dieser Seiteneffekt benötigt:

Wenn die Maus über ein Element bewegt wird, wird ein Dropdown-Menü implementiert. Wenn die Maus vom Element wegbewegt wird, verschwindet das Dropdown-Menü.

Umsetzungsideen

1. Eine Box besteht aus zwei Teilen, der untere Teil ist das Untermenü, das zuerst auf „Ausblenden“ eingestellt wird: Anzeige: keine;
2. Wenn die Maus über das Feld bewegt wird: Triggerereignis - - -onmouseover, js setzt den Anzeigewert des Untermenüs darunter auf - - -block, wodurch das Untermenü angezeigt wird
3. Bewegen Sie die Maus von der Box weg: Lösen Sie das Ereignis - - -onmouseout aus. js setzt den Anzeigewert des Untermenüs darunter auf - - -none, wodurch das Untermenü wieder ausgeblendet wird
4. Ändern Sie die Schriftfarbe, Hintergrundfarbe und andere Stile nach Ihren Wünschen

Codebeispiel

<!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>Bedienelement-Sina Dropdown-Menü</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
        }
        
        ul li {
            Listenstil: keiner;
        }
        
        A {
            Textdekoration: keine;
            Farbe: #4c4c4c;
        }
        
        ein:schweben {
            Farbe: #e88415;
        }
        
        .Kasten {
            Breite: 80px;
            Rand: 50px automatisch;
            Schriftgröße: 14px;
            Farbe: #4c4c4c;
        }
        
        .weibo {
            Position: relativ;
            Hintergrundfarbe: #fcfcfc;
        }
        
        .weibo ein {
            Anzeige: Block;
            Höhe: 40px;
            Zeilenhöhe: 40px;
            Polsterung links: 20px;
        }
        
        .ändern {
            Farbe: #f9a74f;
            Hintergrundfarbe: #edeef0;
        }
        
        ich {
            Position: absolut;
            oben: 50 %;
            rechts: 15px;
            Rand oben: -4px;
            Breite: 5px;
            Höhe: 5px;
            Rahmen unten: 1px durchgehend orangerot;
            Rahmen rechts: 1px durchgehend orangerot;
            transformieren: drehen (45 Grad);
        }
        
        .weiboList {
            Anzeige: keine;
        }
        
        .weiboList li a {
            Anzeige: Block;
            Breite: 80px;
            Höhe: 33px;
            Zeilenhöhe: 33px;
            Polsterung links: 15px;
            Rahmen unten: 1px durchgezogen #fecc5b;
            Hintergrundfarbe: #fff;
        }
        
        .weiboList li a:hover {
            Hintergrundfarbe: #fff5da;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Box">
        <div class="weibo"><a href="#" >Weibo<i class="select"></i></a></div>
        <ul Klasse="weiboList">
            <li><a href="#" >Private Nachricht</a></li>
            <li><a href="#" >Kommentare</a></li>
            <li><a href="#" >@Ich</a></li>
        </ul>
    </div>

    <Skript>
        var box = document.querySelector('.box');
        var weibo = document.querySelector('.weibo');
        var weiboList = document.querySelector('.weiboList');

        box.onmouseover = Funktion() {
            weibo.className = "Weibo-Änderung"
            weiboList.style.display = "Block";

        }

        box.onmouseout = Funktion() {
            weibo.className = "weibo";
            weiboList.style.display = "keine";
        }
    </Skript>
</body>

</html>

Seiteneffekt:

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:

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs
Vue.js Beispielcode zum Anzeigen und Ausblenden des linken sekundären Menüs
Ein einfaches Beispiel für das Anzeigen oder Ausblenden des Effekts eines JS-Menüklicks

<<: Super ausführliches Tutorial zur Installation einer virtuellen VMware-Maschine unter Apple Mac OS

>>: Detailliertes Tutorial zur Konfiguration von Nginx für https-verschlüsselten Zugriff

JS implementiert die Append-Funktion von jQuery

Beheben Sie den Gruppierungsfehler Ausdruck Nr. 1 der SELECT-Liste ist nicht in der GROUP BY-Klausel enthalten und enthält nicht aggregierte Werte in MySQL-Versionen über 5.7

Grund: MySQL 5.7.5 und höher implementiert die Er...

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Umsetzungsideen

Codebeispiel

JS implementiert die Append-Funktion von jQuery

Eine SQL-Anweisung schließt die MySQL-Deduplizierung ab und behält eine

Einführung in die Verwendung von Ankern (benannte Anker) in HTML-Webseiten

Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs

Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL

Kontext und Eigenschaften von React erklärt

MYSQL METADATA LOCK (MDL LOCK) Theorie und Sperrtyptest

Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML

Verwenden Sie reines CSS, um einen Switch-Effekt zu erzielen

Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)

Artikel empfehlen

JS implementiert einen einfachen TodoList-Effekt (Notizblock)

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

Vorteile und Nachteile von JSON sowie Einführung in die Verwendung

Detaillierte Analyse der MySQL-Sperrblockierung

mysql löst zeitzonenbezogene Probleme

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Ausführliche Erklärung der Umgebungsvariablen und Konfigurationsdateien in CentOS

Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen

Beheben Sie den Gruppierungsfehler Ausdruck Nr. 1 der SELECT-Liste ist nicht in der GROUP BY-Klausel enthalten und enthält nicht aggregierte Werte in MySQL-Versionen über 5.7

25 Beispiele für Website-Design im Nachrichtenstil

Textarea-Tag in HTML

So stellen Sie Daten wieder her, nachdem Sie versehentlich IBData-Dateien in MySQL 5.7.33 gelöscht haben

Implementierungsschritte zur Kapselung von Komponenten basierend auf React

Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Windows-Plattform)

Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus