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
Float: links/rechts/keine; 1. Gleichstufiges Schw...
Zwang Einschränkungen gewährleisten Datenintegrit...
Auf einer Webseite wird das Element <input typ...
In diesem Artikel finden Sie das Installations-Tu...
Dieser Artikel beschreibt, wie Sie Apache auf ein...
Für gleichmäßig verteilte Layouts verwenden wir i...
Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...
Inhaltsverzeichnis 1. JavaScript kann alle HTML-E...
Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...
In diesem Artikel wird der spezifische JavaScript...
Dieser Artikel zeichnet das Installations-Grafik-...
Kürzlich habe ich festgestellt, dass nach der Ver...
Löschen einer Datei anhand ihrer Inode-Nummer Ver...
1 Einleitung Im Artikel „PostgreSQL mit Docker st...
Absolute, relative und fixe Positionierung absolu...