目次やサブメニューを開閉

クリックするとサブメニューが開く

  1. HOME
  2. サブメニュー

メニューをクリックしてサブメニューを開こう

JavaScriptの学習ページ

jQueryの学習ページ




HTMLのソースコード

<div class="sidebar">
  <div class="submenu">
    <h3>JavaScriptの学習帳ページ</h3>
    <ul class="hidden">
      <li><a href="current_time.html">現在時刻～リアルタイム表示～</a></li>
      <li><a href="countdown.html">残り時間の計算～カウントダウンタイマー～</a></li>
      <li><a href="array.html">配列～項目リストの表示</a></li>
      <li><a href="object.html">オブジェクト～複数データを1つの変数で管理～</a></li>
    </ul>
  </div>
<div class="submenu">
  <h3>jQueryの学習ページ</h3>
    <ul class="hidden">
      <li><a href="menu.html">目次やサブメニューを開閉させる</a></li>
      <li><a href="menu.html">目次やサブメニューを開閉させる</a></li>
      <li><a href="menu.html">目次やサブメニューを開閉させる</a></li>
    </ul>
  </div>
</div>

JavaScriptのソースコードと概要

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
          integrity="integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function () {
    $(".submenu h3").on("click", function () {
      $(this).next().toggleClass("hidden");
    });
  });
</script>

CSS

.hidden {
  display: none;
}

パターン化されたされたjQueryのプログラム

⓵ イベント設定したい要素の取得
⓶ その要素にイベントを設定
➂ イベントが発生した時の処理を実行

この順序で書かれることがほとんど！！
今回は<h3>がクリックされたら、<ul>に適用されたdisplayプロパティをblockにしたり、noneにしています。

jQueryの読み込み

https://code.jquery.com/
このページのオープンソースから読み取り用のscriptタグをコピーして作業中のプログラムにペーストする！

処理の流れ

$(document).ready(function () {
……
});
HTMLが読み込まれたら、functionの{~}の処理をすると言う意味です。


$(".submenu h3")
$()メソッドは、jQueryを使わないJavaScriptで言えば、document.querySelectorAllメソッドと同じ動きをします。
()内のパラメータにCSSセレクタを含めておけばマッチする全ての要素をHTMLから取得します。

$("セレクタ")
$()メソッドもquerySelectorAllメソッドも「全ての要素を取得する」は同じですが、その後が違います。

querySelectorAll セレクタにマッチしたすべての要素が配列のような形になって取得される
$() 要素を「jQueryオブジェクト」という独自のオブジェクトに変換する


$(".submenu h3").on("click", function () {
onは、イベントを設定するjQuery設定するのメソッドです。
onメソッドのパラメーターは2つ
onclickイベント ⇒ "click"
onsubmitイベント ⇒ "submit"

イベント設定

$()で取得した要素.on("イベント名", function () {
イベントが発生した時の処理
}
jQueryでは、$()で取得された要素が複数ある場合、そのすべてにメソッドを実行するので、繰り返しfor文を書かなくてもよい

$(this)
セレクタではなくthisになっている。これは「イベントが発生した要素」を指している。
※thisをjQueryオブジェクトに変換

$(this).next()
イベントが発生したすぐ次の要素を取得するjQueryメソッド。
ここでは、<h3>のすぐ次にある<ul>が取得されます。

$(this).next().toggleClass("hidden");
toggleClassメソッドは、取得した要素に()内のパラメーターで指定されているクラス名がついていなければ追加し、ついていれば削除します。