jqueryで作るアコーディオンメニュー｜コピペ用サンプル付き
2020.11.26
ユーザーにとって見やすいWebページを作るために覚えておきたいのが、「アコーディオンメニュー」。
このアコーディオンメニューを、HTMLとCSSのみで作る方法について、以前の記事で解説させていただきました。
今回は、jQueryを使ったよりシンプルな作り方をご紹介していきたいと思います！
「jQueryでアコーディオンメニューを作って見たいけど、やり方がわからない…」という方は、コピペ可能なサンプルものせておりますので、ぜひ本記事を参考にしていただければと思います。
アコーディオンメニューとはなにか
まず、アコーディオンメニューとはタイトル部分をクリックするとその中身がスライドして表示/非表示されるといったメニューのことです。
作り方は「CSSのみで作る方法」と「jQueryで作る方法」があります。
今回ご紹介するのは、jQueryで作る方法になります。
「CSSのみで作る方法」については以前ご紹介しておりますので、以下リンク先の記事を参考にしてください。
コピペOK！jQueryを使ったアコーディオンメニューの作り方を確認！
大まかな流れは以下の通りです。
- HTMLでメニュータイトルとその中身のコードを書く
- CSSで中身部分を非表示にしておく
- jQueryでタイトル部分のクリックイベントを作る
では、実際のコードを見ながらアコーディオンメニューの作り方を確認していきましょう。
HTML
まずは下記のようにHTMLを書いていきましょう。
メニューのタイトルと、その中身（コンテンツ）にはクラス名をつけておきます。
<ul id="menu-list">
<li class="list-item">
<h3 class="menu-title">メニュー1</h3>
<div class="contents">
<p>ここに中身を表示します。</p>
</div>
</li>
<li class="list-item">
<h3 class="menu-title">メニュー2</h3>
<div class="contents">
<p>ここに中身を表示します。</p>
</div>
</li>
<li class="list-item">
<h3 class="menu-title">メニュー3</h3>
<div class="contents">
<p>ここに中身を表示します。</p>
</div>
</li>
</ul>
この２行目の「class名：list-item」をクリックした時に中身がスライドして表示されるようにしていきます。
続いて、下記のように書いて、jQueryをHTMLに読み込みましょう。
<script src="jquery.min.js">
</script>
<script src="accordion.js">
</script>
HTMLは以上です。
CSS
今回はjQueryを使って表示/非表示の操作をするため、CSSでは中身の部分を非表示にしておきましょう。
下記のように書いておきます。
.contents {
display: none;
}
jQuery
jQueryは先でも述べたとおり、「クラス名：list-item」をクリックした際の動きを書いていきます。
まずは下記のように、クリックメソッドを使用していきます。
$('.list-item').click(function() {
//ここにクリックした時の操作を書いていく
})
今回、「list-item」は3つあるため、クリックされた「list-item」のみ中身が表示されるように、「$contents」を定義しておきます。
$('.list-item').click(function() {
var $contents = $(this).find('.contents');
})
これで、クリックされた「list-item」の「contents」のみを抽出できました。
続いて、クリックした際の操作ですが、「slideToggle」というメソッドを使って書いていきたいと思います。
アコーディオンメニューが閉じていたらクリックして開き、再度クリックすると閉じるという動作が実装できる非常に便利で使いやすいメソッドです。
下記のように書いていきましょう。
$('.list-item').click(function() {
var $contents = $(this).find('.contents');
$contents.slideToggle();
})
応用編 jQueryを使った多階層のアコーディオンメニューのサンプル
さて、ここではアコーディオンメニューが多階層になった場合を「応用編」と題して見ていきたいと思います。
HTML
HTMLは以下のように書いていきます。
親子の関係と兄弟の関係に注意しながら書いていきましょう。
<body>
<div id="menu-list">
<div class="list-item">
<h3 class="menu-title">メニュー1</h3>
<ul>
<li class="menu-subtitle">メニュー1-1
<ul>
<li>メニュー1-1-1</li>
<li>メニュー1-1-2</li>
<li>メニュー1-1-3</li>
</ul>
</li>
<li class="menu-subtitle">メニュー1-2
<ul>
<li>メニュー1-2-1</li>
<li>メニュー1-2-2</li>
<li>メニュー1-2-3</li>
</ul>
</li>
<li class="menu-subtitle">メニュー1-3
<ul>
<li>メニュー1-3-1</li>
<li>メニュー1-3-2</li>
<li>メニュー1-3-3</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="jquery.min.js">
</script>
<script src="accordion2.js">
</script>
</body>
CSS
この場合もクリックイベントが発生するまではサブタイトル以下の階層は見えないようにしておく必要があります。
下記のようにdisplay:none;を設定しておきましょう。
ul {
display: none;
}
jquery
以下のように親要素（メニュータイトル）と子要素（サブメニュータイトル）に分けてかくとシンプルでわかりやすいのでおすすめです。
//親要素のクリックイベント
$('.menu-title').click(function() {
$(this).next('ul').slideToggle();
});
//子要素のクリックイベント
$('.menu-subtitle').click(function() {
$(this).children('ul').slideToggle();
});
jQueryでアコーディオンメニューを作る際の注意点
jQueryでアコーディオンメニューを作る際、以下のポイントに注意するようにしましょう。
CSSでメニューの中身は非表示にしておく
クリックイベントが発生していない状態では、中身は非表示にしておく必要があります。
jQueryを使ってアコーディオンメニューを作る場合は、CSSで中身を「display:none;」に設定しておくよう注意しましょう！
クリックしたメニュータイトルのみ開閉するようにする
クリックしたメニュータイトルのみにクリックイベントを適用させましょう。
そのためには、$(this).find()を使ってきちんと対象を指定する必要があります。
例えば、下記のように書いてしまうと、全ての「contents」にクリックイベントが適用されてしまうため、今回の例では「メニュー１」をクリックしても「メニュー1~3」全ての中身が開閉してしまいます。注意しましょう。
$('.list-item').click(function() {
$('.contents').slideToggle();
})
まとめ
さて、jQueryを使用したアコーディオンメニューの作成方法をご紹介しましたがいかがでしたでしょうか。
jQueryの「slideToggle」を使えば、非常にシンプルにアコーディオンメニューを作ることが可能です。
作り方に正解はありませんが、色々引き出しを増やしていけると良いですね。
ぜひ、今回ご紹介した方法も参考にしていただけると幸いです！
関連
Webサイト制作
Webサイト制作
SEO外部対策SEO対策
