JavaScript zum Erzielen eines Dropdown-Menüeffekts

Verwenden Sie Javascript, um ein Dropdown-Menü zu Ihrer Referenz zu implementieren. Die spezifischen Inhalte sind wie folgt

Ich lerne immer noch das große Frontend. Bitte verzeihen Sie mir, wenn der Code Unregelmäßigkeiten oder falsche Ideen enthält. Vielen Dank für Ihren Rat.

Dropdown-Menüs oder Seitenmenüs sind in der tatsächlichen Entwicklung sehr praktisch

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Titel</title>
 <Stil>
 *{
 Polsterung: 0;
 Rand: 0;
 Rand: 0;
 }
 .Speisekarte{
 Breite: 100 %;
 Höhe: 50px;
 Rand: 1px durchgehend hellgelb;
 Box-Schatten: 0 2px 5px schwarz;
 }
 .menu div{
 /*Rand oben: 10px;*/
 schweben: links;
 Breite: 19,82 %;
 Höhe: 50px;
 /* Rand: 1px durchgehend rot;*/
 Textausrichtung: zentriert;
 }
 Taste{
 Rand oben: 15px;
 Cursor: Zeiger;
 Breite: 25px;
 Höhe: 15px;
 Hintergrundfarbe: rosa;
 }
 .zeige1{
 Anzeige: keine;
 Breite: 19,82 %;
 Höhe: 250px;
 /*Rand: 1px durchgehend schwarz;*/

 }
 .show1 div{
 Rand: 1px durchgehend rosa;
 Breite: 247px;
 Höhe: 48px;
 Textausrichtung: zentriert;
 }
 A{
 Textdekoration: keine;
 Anzeige: Block;
 Rand oben: 10px;
 }
 ein:schweben{
 Farbe: #ff242d;
 Schriftgröße: 25px;
 }
 </Stil>
</Kopf>
<Text>
 <div Klasse="Menü">
 <div> Dropdown 1
 <Schaltfläche>^</Schaltfläche>
 </div>
 <div> Dropdown-Liste 2
 <Schaltfläche>^</Schaltfläche>
 </div>
 <div> Dropdown 3
 <Schaltfläche>^</Schaltfläche>
 </div>
 <div> Dropdown 4
 <Schaltfläche>^</Schaltfläche>
 </div>
 <div> Dropdown 5
 <Schaltfläche>^</Schaltfläche>
 </div>
 </div>

 <div Klasse="show1">
 <div><a href="#" >4654tyyut</a></div>
 <div><a href="#" >4654</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >tert</a></div>
 </div>
 <Skript>
 var btn = document.querySelector('Schaltfläche')
 var show1 = document.querySelector('.show1')
 Variable Flag = 0
 btn.onclick = Funktion () {
 wenn (Flag === 0) {
 show1.style.display = "Block"
 Flagge = 1
 }anders {
 show1.style.display='keine'
 Flagge = 0
 }
 }
 </Skript>
</body>
</html>

Code Erklärung

Hier verwenden wir hauptsächlich den Onclick des Skripts, um es zu implementieren. Die Schaltfläche, die ich hier verwende, kann auch durch andere Dinge ersetzt werden, und die Methoden sind ähnlich.

Nach dem Klicken auf das entsprechende Element wird ein Ereignis ausgelöst, die Funktion wird aufgerufen und anschließend wird der Wert des Flags beurteilt, um entsprechende Vorgänge auszuführen und das Div auszublenden/einzublenden.

Das Flag ist hier der Schlüssel. Diese Variable ändert sich ständig zwischen 0 und 1, wenn ein Klickereignis auftritt. Die Funktion wird einmal ausgeführt, wenn der Klick auftritt, d. h. die Schleife wird einmal ausgeführt, d. h. der Wert des Flags wird beurteilt, um den Effekt des Anzeigens/Ausblendens zu erzielen.

Demonstrationseffekt

Wenn nicht heruntergezogen

Nach dem Herunterziehen

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-Implementierungscode für das dreistufige Dropdown-Menü
js legt das standardmäßig ausgewählte Element im Dropdown-Menü dynamisch fest
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
JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs
Drei Möglichkeiten zur Implementierung des sekundären Dropdown-Menüs im Navigationsmenü in JS
js, um den Effektcode des kaskadierenden Dropdown-Menüs von Provinzen und Städten im ganzen Land zu erreichen

<<: Verwenden von Docker-Ausführungsoptionen zum Überschreiben von Einstellungen im Dockerfile

>>: Mysql GTID Mha-Konfigurationsmethode

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

JavaScript zum Erzielen eines Dropdown-Menüeffekts

Analyse des Prinzips des Rabbitmq Heartbea-Herzschlagerkennungsmechanismus

So ermitteln Sie die Größe eines Linux-Systemverzeichnisses mit dem Befehl du

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Vue implementiert horizontales Scrollen von Text im Laufschriftstil

Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux

Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.18 unter Windows

Konfiguration und Lizenzaktivierung der Remotedesktopdienste von Windows Server 2016 (2 Benutzer)

Beispielcode zur Implementierung des Neuner-Raster-Layouts dynamischer Bilder mit CSS

Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“

Erläuterung der MySQL-Transaktionsauswahl für die Aktualisierung und Datenkonsistenzverarbeitung

Artikel empfehlen

Navicat-Remoteverbindung zur MySQL-Implementierungsschritteanalyse

HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

Vue implementiert ein einfaches Einkaufswagenbeispiel

JavaScript-Objekte (Details)

Analyse der Linux-Konfiguration zur Realisierung eines schlüssellosen Anmeldevorgangs

Vue implementiert eine kleine Countdown-Funktion

Angular Dependency Injection erklärt

HTTP-Statuscodes

Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank

Dynamischer Sternenhimmel Hintergrund umgesetzt mit CSS3

Zusammenfassung der Merkmale des SQL-Modus in MySQL

Eine kurze Analyse des Zeitproblems von MySQL

Detaillierte Erklärung der Verwendung von Bildschirmbefehlen in Linux

Vue implementiert die Drag & Drop-Funktion für Bilder