クリックメニュー #JavaScript

index.html

<body>
  <h1>このゲームの内容</h1>

  <div class= menu>
    <h2>登場人物</h2>
    <ul class="closed">
      <li>1.太郎君</li>
      <li>2.山田くん</li>
      <li>3.よしおくん</li>
    </ul>
  </div>

  <div class="menu">
    <h2>約束</h2>
    <ul class="closed">
      <li>1.怒らない</li>
      <li>2.寂しくさせない</li>
      <li>3.愛情をあげる</li>
    </ul>
  </div>
  <script src="script/jquery-3.6.0.min.js"></script>
  <script>
   'use strict';

   $(document).ready(function(){
     $('.menu h2').on('click', function(){
       $(this).next().toggleClass('closed')
     })
   });
  </script>

</body>

jQueryを使ってクリックしたら、メニューが開くプログラムです。

jQueryダウンロードは、こちら▶　https://jquery.com/download/

これをscriptタグに埋め込む。

(document).ready(function()
これからjQuery始まるよの合図。必ず記述。

h2をクリックすると、ul要素の中のliタグたちが現れる。
css上では、closedは消えている。

style.css

.closed {
  display: none;
}

menuクラスのh2要素を取得する。

onはイベントを設定する、(click, function()
イベント発生要素(this).next(次の要素つまりul).toggaleClass(指定のクラスがあれば削除、なければ追加)(クラス名今回はclosed)