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
Erstellen Sie eine schöne, umklappbare Anmelde- und Registrierungsoberfläche auf HTML+CSS-Basis
Erstellen Sie eine ansprechende Anmelde- und Regi...
Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme
Voraussetzungen Um Container auf Windows Server a...
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
Natives JS zum Erstellen einer Drag-Fotowand
Dieser Artikel zeigt Ihnen eine verschiebbare Fot...
MySQL 8.0.17 Installations- und einfaches Konfigurationstutorial unter macOS
Wenn Sie nicht verstehen, was ich geschrieben hab...
Beispiele für häufige Nginx-Fehlkonfigurationen
Inhaltsverzeichnis Fehlender Stammspeicherort Off...
Details zur geplanten Datenbanksicherung und Datenwiederherstellung bei Navicat für MySQL
Das Ändern oder Löschen einer Datenbank kann zu D...
So installieren Sie Redis im Docker, legen das Kennwort fest und stellen eine Verbindung her
Redis ist ein verteilter Cache-Dienst. Caching is...
Implementierung einer nicht geheimen SSH-Kommunikation in Linux
Was ist SSH? Administratoren können sich remote a...
Detailliertes Tutorial zur Installation von Nginx auf CentOS8 (Bild und Text)
Nginx, ausgesprochen „Engine x“, ist ein Open Sou...
Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering
Oftmals werden Sie auf einen <a>-Tag-Stil st...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
Detaillierte Erläuterung des Beispiels einer MySQL-Einzeltabellenabfrage
1. Daten vorbereiten Die folgenden Operationen we...
Das WeChat-Applet „Scroll-View“ implementiert eine Lösung zum doppelten Laden von Daten beim Hochziehen
In der Scroll-Ansicht des WeChat-Applets treten b...
MySql Group By implementiert die Gruppierung mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...