電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【jQuery】を利用して「縦並びsideメニューをアコーディオン化」(ドロップダウンメニュー作成)

calendar

以前「HTML/CSS」のみでの縦並びsideメニューのアコーディオン化についてまとめました。↓

 

 

今回は【jQuery】を使用したsideメニューのアコーディオン化についてまとめたいと思います。

jQueryは、JavaScriptで作成されたライブラリ(複数のプログラムをひとまとめにしたようなもの)で、JavaScriptをより簡単な記述で利用できます。

記述箇所については、HTMLでは内部に埋め込む「インライン」と、別途専用ファイルを作成しそれを呼び出す「外部スクリプト」があります。

今回は両方のパターンを記しておきたいと思います。

使用するデータ(HTML/CSS)は、当ブログの過去記事で作成したものを元とし、進めていこうと思います。↓

 

スポンサーリンク

jQueryのインラインブロック記述

index.htmlのhead内にjQueryのスクリプトを直接埋め込みます。

上記では、head内の10行目~23行目に追加する形で埋め込んでいます。

まず、jQueryのライブラリはダウンロードしたものを使用するか、WEB上から引っ張てくるかに分かれれます。

10~11行目の記述についてはCDN を使用して HTMLファイル内でライブラリを直接読み込む記述になりますので、今回はWEBから引っ張てくる記述を使用しています。

12~23行目の記述は、jQueryで指定した要素をアコーディオンメニュー化しています。

後はCSSを追加して表示を整えます。元々のサイドメニューのCSSを上記のように書き換えます。

結果については、後述する外部スクリプトと同じ内容になるので、このページ下部の動画を参照ください。

jQueryの外部スクリプト記述

HTMLから外のファイルを呼び出すので、下記のような構成になります。HTMLと同じ階層に、空ファイルを作成し、拡張子を「js」とします。(名前はtestとしておきます。)

ファイル構成

作成した「test.js」に、インラインではhead部に記述していた「12~23行目」のjQuery文をそのまま入れます。(jQueryで指定した要素をアコーディオンメニュー化する記述)

後は、HTMLのhead内にCDN を使用して HTMLファイル内でライブラリを直接読み込む記述と、上記のjsファイルを呼び出す記述を追加します。

10~11行目がCDN を使用して HTMLファイル内でライブラリを直接読み込む記述です。

12~13行目が、先ほど作成した「test.js」を呼び出す外部スクリプト参照先の記述になります。

CSSについては前途したものと同じになります。

インライン、外部スクリプト共に下記のような結果となります。

まとめ

・jQueryの記述には「インライン」と「外部スクリプト」があります

・jQueryのライブラリはダウンロードしたものを使用するか、WEB上から引っ張てくるかに分かれれます

・インラインではhead内にjQueryをそのまま記述します

・外部スクリプトの場合、別途jsファイルの作成が必要で、HTML head内に参照先を記述します

・CSSのスタイリングや出力される結果は両者共通

今回のようにメニューのみjQueryを利用する位であれば長ったらしい記述にもならないので「インライン」での処理でもいいですが、他にもjQueryを利用すれば自ずと記述が長くなるので、一般的には「外部スクリプト」での記述が多いみたいです。