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

MySQL-langsame Abfrage pt-query-digest Analyse des langsamen Abfrageprotokolls

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Umsetzungsideen

Codebeispiel

MySQL-langsame Abfrage pt-query-digest Analyse des langsamen Abfrageprotokolls

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos

Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren

Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

Detaillierte Erklärung zum Lay-Loading von JavaScript

Detaillierte Erklärung des CSS3-Rotationswürfelproblems

Chrome überwacht Cookie-Änderungen und weist Werte zu

Tomcat verwendet Log4j zur Ausgabe des catalina.out-Protokolls

Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht

Artikel empfehlen

Detaillierte Beschreibung von Shallow Copy und Deep Copy in js

Zusammenfassung der Dinge, auf die Sie in der Fußzeile einer Webseite achten sollten

CSS-Beispielcode zum Festlegen des Bildlaufleistenstils

Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 16.04 MySQL 8.0

Detaillierte Erklärung des MySQL-Datenbankparadigmas

Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte

vue + springboot realisiert den Login-Bestätigungscode

Website User Experience Design (UE)

Nginx-Beispielcode zur Implementierung dynamischer und statischer Trennung

So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%

Beispielcode zur Implementierung eines 3D-Bucheffekts mit CSS

MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger

Einführung in die Verwendung gängiger XHTML-Tags

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)