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

So zeigen Sie ein kleines Symbol vor der Browser-URL an

Artikel empfehlen

So überprüfen Sie die Festplattennutzung unter Linux

1. Verwenden Sie den Befehl df, um die gesamte Fe...

Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

1. Ich habe vor kurzem eine neue Version von Ubun...

Eine kurze Diskussion über die Unterschiede und eine Zusammenfassung der drei Gleitkommatypen Float, Double und Decimal in MySQL

Die Speichergröße und der Bereich jedes Gleitkomm...

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Umsetzungsideen

Codebeispiel

So zeigen Sie ein kleines Symbol vor der Browser-URL an

So importieren Sie Vue-Komponenten automatisch bei Bedarf

So verwenden Sie nginx, um eine angegebene Schnittstelle (URL) zu blockieren

Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)

Detaillierte Erläuterung der globalen Parameterpersistenz in den neuen Funktionen von MySQL 8

js implementiert das Umschalten von Bildern per Maus (ohne Timer)

So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto

Analysieren Sie die Rolle von rel="nofollow" in HTML und die Verwendung des rel-Attributs

Artikel empfehlen

So überprüfen Sie die Festplattennutzung unter Linux

Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

Aktualisierungen für React Router V6

Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets

Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.

Eingabetyp begrenzen (mehrere Methoden)

Eine kurze Diskussion über die Unterschiede und eine Zusammenfassung der drei Gleitkommatypen Float, Double und Decimal in MySQL

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute

Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 5.7.15

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Detaillierte Erläuterung der Wiederverwendung und Erweiterung von Vue-Komponenten

Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons

So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden