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:
|
<<: Verwenden von Docker-Ausführungsoptionen zum Überschreiben von Einstellungen im Dockerfile
>>: Mysql GTID Mha-Konfigurationsmethode
Artikel empfehlen
Detaillierte Erklärung, wie Komponenten in React kommunizieren
1. Was ist Wir können die Kommunikation zwischen ...
Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen
Klicken Sie auf den Ankerlink, um reibungslos zu ...
Sortierung der technischen Hinweise zum Linux-Kernel-Gerätetreiber-Kernel-Debugging
/****************** * Kernel-Debugging-Technologi...
Detaillierte Erläuterung der MySQL-Protokoll- und Sicherungs- und Wiederherstellungsprobleme
In diesem Artikel werden MySQL-Protokolle sowie B...
Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht
Vorne geschrieben Unabhängig davon, wie gut der C...
Installieren Sie Ethereum/Ethereum von Grund auf unter CentOS7
Inhaltsverzeichnis Vorwort Fügen Sie Sudo-Schreib...
Docker Link realisiert die Containerverbindung
Inhaltsverzeichnis 1.1. Netzwerkzugriff zwischen ...
Details zur zugrundeliegenden Datenstruktur von MySQL-Indizes
Inhaltsverzeichnis 1. Indextyp 1. B+ Baum 2. Was ...
Schritte zum Ändern des MySQL-Zeichensatzes auf UTF8 unter Linux
Inhaltsverzeichnis 1. Überprüfen Sie den MySQL-St...
Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte
Vorwort Heutzutage gibt es viele Geräte, darunter...
So passen Sie die Höhe eines Divs an die Höhe des Browsers an
Diese alte Frage hat unzählige Frontend-Entwickler...
Verständnis für Webdesign-Layout
<br />Hier ergibt sich ein Widerspruch: In k...
Erste Schritte mit CSS3-Animation in 10 Minuten
Einführung Mit Animation können Sie mithilfe von ...
Tutorial zur SQL-Optimierung: IN- und RANGE-Abfragen
Vorwort In „High Performance MySQL“ wird erwähnt,...