【jQuery】クリックするとリストが消えたり出現したりするコード

クリックするとリストが出現するコード

See the Pen jQueryナビゲーションメニュー by バイオハックch (@synd1090) on CodePen.

上の「navigation」をクリックすると、display:noneに設定されていたul要素が出現するようになります。再度クリックすると消えます。

jQueryを読み込ませる

jQueryを読み込ませるには、ダウンロードしてファイルを指定してやる方法と、Web上から読み込ませる（CDN）方法があります。今回はCDNを用いています。

<script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

jQueryのCDNは次のページで公開されているので、新しいヴァージョンを選んでコードを取得し張り付けましょう。張り付けるのは、bodyが終わる直前です。そうしなければ、動作させたい要素に働きかけることができません。

http://code.jquery.com/

googleのCDNでもjQueryを利用することができます。

https://developers.google.com/speed/libraries/#jquery

jQueryを書いてみる

今回のコードは次のようになりました。

$(document).ready(function() {
    $('.submenu h3').on('click', function() {
        $(this).next().toggleClass('hidden');
    });
});

$(document).ready(function(){});の意味

jQueryを書く際の決まり文句です。意味は、HTMLが読まれたら、function内の{ }の処理をするという意味です。

$(‘.submenu h3’)の意味

jQueryでは要素を取得する際には、$(`セレクタ`）で示します。$()メソッドも、querySelectorAllメソッドもどちらもセレクタを拾う意味では同じですが、その後の処理が違います。querySelectorAllメソッドでは、取得した要素は配列ような形で保管されていますが、$()メソッドはjQueryオブジェクトに変換して保存しています。jQueryオブジェクトは、メソッドとプロパティを持っており、メソッドを使用することが可能となります。