JavaScript zum Erzielen eines Dropdown-Menüeffekts

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

Artikel empfehlen

Zusammenfassung der CSS-Schwebeelementanalyse

Float: links/rechts/keine; 1. Gleichstufiges Schw...

MySQL-Einschränkungstypen und Beispiele

Zwang Einschränkungen gewährleisten Datenintegrit...

MySQL 8.0.12 Einfaches Installations-Tutorial

In diesem Artikel finden Sie das Installations-Tu...

Implementierung der Leistungsoptimierung des Element-Shuttle-Frames

Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...

JavaScript-Dokumentobjektmodell DOM

Inhaltsverzeichnis 1. JavaScript kann alle HTML-E...

Verwendung regulärer Ausdrücke in CSS-Selektoren

Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...

Implementierung eines einfachen Karussells auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

So löschen Sie Dateinamen oder Verzeichnisse mit Sonderzeichen in Linux

Löschen einer Datei anhand ihrer Inode-Nummer Ver...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...