ドロップダウンリストのJavaScript実装

<本文>
<!--最外層-->
<div class="outer">
<!-- 内部 -->
<div class="inner">
<h2>まず</h2>
 <ul>
  <li>あ</li>
  <li>ば</li>
  <li>c</li>
 </ul>
</div>

<div class="inner">
 <h2>2番目</h2>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

<div class="inner">
 <h2>2番目</h2>
 <ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
</div>

 <div class="inner">
  <h2>2番目</h2>
  <ul>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ul>
 </div>


<!-- 内部 -->
</div>
<!--最外層-->
</本文>

 .外側{
   マージン: 0 自動;
   幅: 500ピクセル;
   高さ: 600px;
   境界線: 1px 実線の赤;
  }
  .外側 .内側{
   幅: 500ピクセル;
   境界線: 1px 実線の赤;

  }
  .外側 .内側 ul{
   リストスタイル: なし;
   境界線: 1px 実線フクシア色;
  }
  h2{
   境界線: 1px 実線青紫;
   高さ: 30px;
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   カーソル: ポインタ;
   背景色: #74a400;
   マージン: 0;
  }
  ul{
   表示: なし;
   

  }
  
 
  ここでは、.ul は HTML に含まれていないため、js を通じて追加する必要があります。
   表示: ブロック;
   背景色: コーンフラワーブルー;
   マージン: 0;
  }
  ul li{
   境界線: 1px 実線 コーンフラワーブルー;
   背景色: ダークグレー;
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   左マージン: -42px;
   カーソル: ポインタ;

}

window.onload = 関数（）{
  // h2 と ul を取得
   var h2 = document.getElementsByTagName("h2");
   タグ名で要素を取得する
   //すべてのh2にクリックイベントをバインドします for (let i = 0; i <h2.length; i++) {
    h2[i].index = i;
    h2[i].onclick = 関数（）{
 // バインドされたイベントは、h2 と同じレベルの ul にクラス名がない場合、そのクラス名は ul という名前になります。クラス名がある場合は、そのクラス名は空に設定されます。
 // CSS コードを見ると、js が対応する h2 クラス名をまだ変更していないため、機能しない .ul 部分があることがわかります。これは、h2 がクリックされたときにのみ変更されます。
 // この書き方は、CSS スタイルの内容を直接変更するのではなく、名前を変更することでスタイルの変更を実現します。これにより、スタイルを繰り返し記述することなく、1 つのスタイルを何度も使用することができます。
     if (ul[this.index].className == ""){
      ul[this.index].className = "ul";
     }それ以外 {
      ul[this.index].className = "";
     }
    }
 }
}