JavaScript-Implementierung der Dropdown-Liste

<Text>
<!--Äußerste Schicht-->
<div Klasse="äußere">
<!-- Innen -->
<div Klasse="inner">
<h2>Erste</h2>
 <ul>
  <li>ein</li>
  <li>b</li>
  <li>c</li>
 </ul>
</div>

<div Klasse="inner">
 <h2>Zweite</h2>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

<div Klasse="inner">
 <h2>Zweite</h2>
 <ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
</div>

 <div Klasse="inner">
  <h2>Zweite</h2>
  <ul>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ul>
 </div>


<!-- Innen -->
</div>
<!--Äußerste Schicht-->
</body>

 .äußere{
   Rand: 0 automatisch;
   Breite: 500px;
   Höhe: 600px;
   Rand: 1px durchgehend rot;
  }
  .äußeres .inneres{
   Breite: 500px;
   Rand: 1px durchgehend rot;

  }
  .äußeres .inneres ul{
   Listenstil: keiner;
   Rand: 1px durchgehendes Fuchsia;
  }
  h2{
   Rand: 1px durchgehend blauviolett;
   Höhe: 30px;
   Anzeige: Flex;
   Inhalt ausrichten: zentriert;
   Cursor: Zeiger;
   Hintergrundfarbe: #74a400;
   Rand: 0;
  }
  ul{
   Anzeige: keine;
   

  }
  
 
  Hier ist .ul nicht in HTML, also müssen Sie es über js hinzufügen.
   Anzeige: Block;
   Hintergrundfarbe: Kornblumenblau;
   Rand: 0;
  }
  ul li{
   Rand: 1px durchgehendes Kornblumenblau;
   Hintergrundfarbe: dunkelgrau;
   Anzeige: Flex;
   Inhalt ausrichten: zentriert;
   Rand links: -42px;
   Cursor: Zeiger;

}

fenster.onload = Funktion () {
  // Holen Sie sich h2 und ul
   var h2 = document.getElementsByTagName("h2");
   var ul = document.getElementsByTagName("ul");
   //Binde ein Klickereignis an alle h2 for (let i = 0; i <h2.length; i++) {
    h2[i].index = i;
    h2[i].onclick = Funktion () {
 //Das gebundene Ereignis besteht darin, dass, wenn die UL auf derselben Ebene wie h2 keinen Klassennamen hat, ihr Klassenname ul lautet. Wenn dies der Fall ist, wird ihr Klassenname auf leer gesetzt.
 //Durch den CSS-Code können Sie sehen, dass es einen .ul-Teil gibt, der nicht funktioniert, da js den entsprechenden h2-Klassennamen noch nicht geändert hat. Er ändert sich erst, wenn auf h2 geklickt wird.
 //Diese Schreibmethode ändert den CSS-Stilinhalt nicht direkt, sondern realisiert die Stiländerung durch Ändern des Namens. Auf diese Weise kann ein Stil mehrmals verwendet werden, ohne dass der Stil wiederholt geschrieben werden muss.
     wenn (ul[this.index].className == ""){
      ul[diesen.index].className = "ul";
     }anders {
      ul[diesen.index].klassenName = "";
     }
    }
 }
}