最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
ユーザーにとって見やすいWebページを作るために覚えておきたいのが、「アコーディオンメニュー」。
このアコーディオンメニューを、HTMLとCSSのみで作る方法について、以前の記事で解説させていただきました。
今回は、jQueryを使ったよりシンプルな作り方をご紹介していきたいと思います!
「jQueryでアコーディオンメニューを作って見たいけど、やり方がわからない…」という方は、コピペ可能なサンプルものせておりますので、ぜひ本記事を参考にしていただければと思います。
目次
まず、アコーディオンメニューとはタイトル部分をクリックするとその中身がスライドして表示/非表示されるといったメニューのことです。
作り方は「CSSのみで作る方法」と「jQueryで作る方法」があります。
今回ご紹介するのは、jQueryで作る方法になります。
「CSSのみで作る方法」については以前ご紹介しておりますので、以下リンク先の記事を参考にしてください。
大まかな流れは以下の通りです。
では、実際のコードを見ながらアコーディオンメニューの作り方を確認していきましょう。
まずは下記のように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>
この2行目の「class名:list-item」をクリックした時に中身がスライドして表示されるようにしていきます。
続いて、下記のように書いて、jQueryをHTMLに読み込みましょう。
<script src="jquery.min.js"> </script> <script src="accordion.js"> </script>
HTMLは以上です。
今回はjQueryを使って表示/非表示の操作をするため、CSSでは中身の部分を非表示にしておきましょう。
下記のように書いておきます。
.contents { display: none; }
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(); })
さて、ここではアコーディオンメニューが多階層になった場合を「応用編」と題して見ていきたいと思います。
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>
この場合もクリックイベントが発生するまではサブタイトル以下の階層は見えないようにしておく必要があります。
下記のようにdisplay:none;を設定しておきましょう。
ul { display: none; }
以下のように親要素(メニュータイトル)と子要素(サブメニュータイトル)に分けてかくとシンプルでわかりやすいのでおすすめです。
//親要素のクリックイベント $('.menu-title').click(function() { $(this).next('ul').slideToggle(); }); //子要素のクリックイベント $('.menu-subtitle').click(function() { $(this).children('ul').slideToggle(); });
jQueryでアコーディオンメニューを作る際、以下のポイントに注意するようにしましょう。
クリックイベントが発生していない状態では、中身は非表示にしておく必要があります。
jQueryを使ってアコーディオンメニューを作る場合は、CSSで中身を「display:none;」に設定しておくよう注意しましょう!
クリックしたメニュータイトルのみにクリックイベントを適用させましょう。
そのためには、$(this).find()を使ってきちんと対象を指定する必要があります。
例えば、下記のように書いてしまうと、全ての「contents」にクリックイベントが適用されてしまうため、今回の例では「メニュー1」をクリックしても「メニュー1~3」全ての中身が開閉してしまいます。注意しましょう。
$('.list-item').click(function() { $('.contents').slideToggle(); })
さて、jQueryを使用したアコーディオンメニューの作成方法をご紹介しましたがいかがでしたでしょうか。
jQueryの「slideToggle」を使えば、非常にシンプルにアコーディオンメニューを作ることが可能です。
作り方に正解はありませんが、色々引き出しを増やしていけると良いですね。
ぜひ、今回ご紹介した方法も参考にしていただけると幸いです!