JavaScript zur Implementierung eines einziehbaren sekundären Menüs

<!--Liste abrufen-->
<Stil>
 
    li {
        /*Den Li-Punkt löschen*/
        Listenstil: keiner;
    }
 
    li Spanne {
        /*Hintergrundbild für das Span-Tag festlegen (kleine Plus- und Minuszeichen am Anfang, keine Wiederholung, Anfangsposition 0 0)*/
        Hintergrund: URL (add.png) keine Wiederholung links Mitte;
        Polsterung links: 20px;
    }
 
    /*Startstil*/
    li ul{
        Höhe: 0;
        /*Überlauf ausgeblendet*/
        Überlauf: versteckt;
        /*Übergangseffekt hinzufügen*/
        Übergang: alle 0,5 s;
    }
    /*Stil erweitern*/
    .offen{
        Hintergrundbild: URL (minus.png);
    }
    .öffnen+ul{
        Höhe: 70px;
    }
 
 
</Stil>
 
 
<ul Klasse="Baum">
    <li><span class="open">Anwesenheitsverwaltung</span>
        <ul>
            <li>Tägliche Anwesenheit</li>
            <li>Urlaubsantrag</li>
            <li>Überstunden auf Geschäftsreise</li>
        </ul>
    </li>
    <li><span>Informationszentrum</span>
        <ul>
            <li>Tägliche Anwesenheit</li>
            <li>Urlaubsantrag</li>
            <li>Überstunden auf Geschäftsreise</li>
        </ul>
    </li>
    <li><span>Gemeinsames Büro</span>
        <ul>
            <li>Tägliche Anwesenheit</li>
            <li>Urlaubsantrag</li>
            <li>Überstunden auf Geschäftsreise</li>
        </ul>
    </li>
</ul>
 
<script src="mJS.js"></script>

// Pull-out-Liste // Umsetzungsideen:
 
var spans = document.querySelectorAll(".tree span");
 
für (var i = 0; i < spans.length; i++) {
    spans[i].onclick = Funktion () {
        // konsole.log(dies);
        // Zu ändernde Elementspanne suchen // Klasse ändern, löschen oder hinzufügen -> öffnen
        //Überprüfen Sie, ob eine Öffnung auf sich selbst vorliegt, und löschen Sie diese ggf.!
        // this -> zeigt auf das Element, das das Ereignis ausgelöst hat if (this.className == "open") {
            // Wenn ja, dann lösche es!
            dieser.Klassenname = "";
        } anders {
            // Wenn nicht, füge es hinzu und lösche die anderen, die bereits geöffnet sind!
            //Finde das Open (li des Open-Attributs)
            var openSpan = document.querySelector(".tree.open")
            if (openSpan !== null) {
                // Wenn die Sammlung nicht leer ist, löschen Sie ihr offenes Attribut openSpan.className = "";
            }
            // Legen Sie das Open-Attribut für sich selbst fest. this.className = "open";
        }
 
 
    }
}