Natives js zum Erzielen eines Akkordeoneffekts

Auch bei der tatsächlichen Entwicklung von Webseiten tauchen Akkordeons häufig auf.

Ich habe ein einfaches Akkordeon gemacht, aber ich hatte das Gefühl, dass sein Übergangseffekt nicht realisiert wurde und die Inhaltsliste abrupt erschien. Das Effektbild ist wie folgt:

Der Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Akkordeon</title>
    <Stil>
        Körper,
        ul {
            Polsterung: 0;
            Rand: 0;
        }

        li {
            Listenstil: keiner;
        }

        .nav {
            Breite: 150px;
            Höhe: 310px;
            Rand oben: 30px;
            Rand links: 50px;
            Schriftgröße: 20px;
            Rand: 1px durchgezogen #ccc;
        }

        .nav>ul>li:n-tes-Kind(2n+1) {
            Hintergrundfarbe: Kadettenblau;
        }

        .nav>ul>li:n-tes-Kind(2n+2) {
            Höhe: 160px;
            Anzeige: keine;
            Übergang: alles 1en;
        }

        .nav>ul>#ausgewählt {
            Hintergrundfarbe: rgb(46, 115, 117);
        }

        .nav>ul>li:nth-child(2) {
            Anzeige: Block;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="nav">
        <ul>
            <li id="selected">Titel 1</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Titel 2</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Titel 3</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Überschrift 4</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Titel 5</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Titel 6</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
        </ul>
    </div>
    <Skript>
        var Titel = Dokument.querySelectorAll(".nav>ul>li:nth-child(2n+1)");
        für (var i = 0; i < Titel.Länge; i++) {
            Titel[i].onmouseover = Funktion () {
                für (var j = 0; j < Titel.Länge; j++) {
                    Titel[j].nextElementSibling.style.display = "keine";
                    Titel[j].id = "";
                }
                this.id = "ausgewählt";
                this.nextElementSibling.style.display = "Block";
            }
        }
    </Skript>
</body>

</html>

Der Übergangseffekt wird mit dem Code hinzugefügt: Übergang: alles 1en;
Aber es hat nicht geklappt, ein wenig zweifelhaft? !

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:

Reines JS zum Erzielen des Akkordeoneffektcodes
Verwenden Sie ReactJS, um Registerkartenwechsel, Menüleistenwechsel, Akkordeonwechsel und Fortschrittsbalkeneffekte zu implementieren
js, um einen einfachen Akkordeoneffekt zu erzielen
Navigationsmenü mit Akkordeoneffekt, erstellt mit nativem JS
Entwicklungsbeispiel für eine Akkordeonmenükomponente in Vue.js
js realisiert den Effekt eines faltbaren und erweiterbaren Akkordeonmenüs
Reines js, um einen Akkordeoneffekt zu erzielen
JS realisiert den Bildakkordeoneffekt
Natives JS zum Erzielen eines vertikalen Akkordeoneffekts
Html5 js zum Erzielen eines Akkordeoneffekts

<<: Detailliertes Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 5.7.27

>>: Detaillierte Erläuterung der Nginx Rewrite-Nutzungsszenarien und Codebeispiele