jQueryとは
JSでDOM操作を行う場合、ソース量が膨大になってしまい、重くなってしまうことが多々あります。
そのため、JSのライブラリとして存在するｊQueryを使ってコードの量を少なくしていきましょうということで、使われます。
JSのライブラリになるので、処理の実行内容は変わりません。取得して加工して出力する流れです。
index.html
<div class="sidebar">
<h2>サポートページ</h2>
<div class="submenu">
<h3>1. 初めて使うとき</h3>
<ul class="hidden">
<li><a href="">- 概要</a></li>
<li><a href="">- インストールする</a></li>
<li><a href="">- アカウントを登録する</a></li>
<li><a href="">- アンインストールする</a></li>
</ul>
</div>
<div class="submenu">
<h3>2. 基本的な使い方</h3>
<ul class="hidden">
<li><a href="">- 基本的な操作方法</a></li>
<li><a href="">- 元の状態に復元する</a></li>
<li><a href="">- 機能拡張プラグインを追加する</a></li>
</ul>
</div>
</div>
上記の内容でブラウザで表示するとh2,h3,タグのみが表示されるのではないかと。
ここで、jQueryを使ってDOM
index.js
$(document).ready(function() {
$('.submenu h3').on('click', function() {
$(this).next().toggleClass('hidden');
});
});
一行目に書かれているのは、HTMLが読み込まれたら、処理を始めるよという合図です。関数処理が始まりますが、更に関数処理が入ってきます。
(取得した要素)今回はsubmenu.on(イベント名（clickイベント）,function()
イベント発生の処理▶ this(submenu).next(これはjQueryのオブジェクトに変えてくれます)
toggleClassは、（）内で指定されている要素がなかった場合は、削除、あった場合は追加してくれます。