JavaScript, um den Effekt des Klickens auf das Untermenü zu erzielen

In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung des Erscheinens eines Untermenüs beim Klicken zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Schauen wir uns zunächst die Auswirkungen an, die ein Klick auf das unten dargestellte Untermenü hat:

Klicken Sie auf die gelbe Schaltfläche. Ein Untermenü wie unten dargestellt wird angezeigt:

Schauen wir uns zunächst das Layout an:

<div Klasse="Menü">
 <div Klasse="Zeichen" id="Zeichen"></div>
 <div Klasse="lis" id="lis">
 <ul>
 <li><a href="">eine</a></li>
 <li><a href="">zwei</a></li>
 <li><a href="">drei</a></li>
 <li><a href="">vier</a></li>
 <li><a href="">fünf</a></li>
 </ul>
 </div>
</div>

Die CSS-Stile sind wie folgt:

ul{
 Inline-Start-Auffüllung: 0px;
 }
 .Speisekarte{
 Rand: 0 automatisch;
 Hintergrund: #0DA795;
 Höhe: 40px;
 Breite: 600px;
 }
 .Zeichen{
 Breite: 30px;
 schweben: rechts;
 Rand rechts: 20px;
 Rand oben: 8px;
 Höhe: 25px;
 Hintergrund: rgba(243,193,63,1.00);
 Rahmenradius: 5px;
 Position: relativ;
 Cursor: Zeiger; //Den Cursor auf die Form einer Hand setzen}
 .lis{
 Position: absolut;
 oben: 30px;
 Anzeige: keine;
 }
 .lis ul li{
 Listenstil: keiner;
 Breite: 600px;
 Zeilenhöhe: 40px;
 Schriftgröße: 14px;
 Textausrichtung: zentriert;
 Rahmen unten: 1px durchgezogen #565656;
 Hintergrund: #EAEDD5;
 }.lis ein{
 Textdekoration: keine;
 Farbe: Schwarz;
 }
 .lis a:hover{
 Farbe: #0da759;
}

Achten Sie besonders auf die Position in CSS-Stilen.
Die Anzeige in der Lis-Klasse erfolgt ohne Funktion, da das Untermenü am Anfang ausgeblendet ist.

Der JavaScript-Teil ist wie folgt:

1. Holen Sie sich zuerst ihre IDs. Nachdem Sie ihre IDs erhalten haben, fügen Sie über OnClick ein Klickereignis zur ersten ID (Signatur) hinzu.
2. Deklarieren Sie eine Variable i, weisen Sie i die zweite ID zu und verwenden Sie eine Verzweigungsanweisung if...else. Wenn i gleich none ist, führen Sie die erste Anweisung aus. Wenn nicht, führen Sie die zweite Anweisung aus.

Dadurch wird der gewünschte Effekt erzielt, siehe den Implementierungscode:

<Skript>
 var biaozhi=document.getElementById("Zeichen");
 var li = document.getElementById("lis");
 biaozhi.onclick=Funktion(){
 var i=li.style.display;
 wenn (i=="keine"){
 li.style.display="block";//Erste Anweisung}else{
 li.style.display="none"; //Zweite Anweisung}
 }
</Skript>

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.