jQueryでアコーディオンメニューを作る

goto_jp 56,821views 更新:2014年4月8日

See the Pen jquery accordion menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

以前CSSだけで動くものを紹介しましたが、古いブラウザ対応ならjQueryを使った方が安定することも多く、AndroidだとCSS3のアニメーションが固くJavaScriptで動作させた方がスムーズなケースもあるため紹介します。

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="accordion">
  <ul>
    <li>
      <span class="toggle">子項目ありメニュー</span>
      <ul>
        <li><a href="#">子項目</a></li>
        <li><a href="#">子項目</a></li>
        <li><a href="#">子項目</a></li>
      </ul>
    </li>
    <li>
      <span class="toggle">子項目ありメニュー</span>
      <ul>
        <li><a href="#">子項目</a></li>
        <li><a href="#">子項目</a></li>
        <li><a href="#">子項目</a></li>
      </ul>
    </li>
    <li><a href="#">子項目なし</a></li>
    <li><a href="#">子項目なし</a></li>
  </ul>
</div>

まず一行目でGoogleがホスティングしているjQueryを読み込んでいます。
展開をさせたい項目に「toggle」のクラスを付与しています。

CSSは動作に関係ないのと長くなるので割愛します。サンプル側のソースをご覧ください。

JavaScript

$(function () {
  $(".accordion .toggle").click(function () {
    $(this).next("ul").slideToggle(200);
    $(this).toggleClass("open");
  });
});

accordion 内の toggle をスイッチにして、toggle の次にある

    にjQuery関数のslideToggleを実行させています。

    アコーディオン風にするだけなら4行目の記述はいらないのですが、この4行目で toggle に open のクラスを加え、サンプルでは矢印を下に向けています。

コメント

  1. @nabe のコメント (2014年4月30日)

    はじめまして、こんにちは。
    こちら、とてもいいですね。
    是非使わせて頂きたいと思うのですが、一つ開いたら、もう一つは自動で閉じるようにするには、
    どの様にしたらいいのでしょうか?
    お教え頂けましたら幸いです。

    • goto_jp のコメント (2014年6月9日)

      コメントありがとうございます。

      サンプルはごく簡単な内容に収めたかったので現在は「クリックした項目を開く」だけの簡単な処理ですが、nabeさんのご要望の場合は下記のような考え方に変わります。

      ・まずリストをすべて閉じる
      ・クリックされたリストが何番目か記録する
      ・該当する項目をトグルする

      直接こちらに書きますと長くなってしまうので避けさせて頂きますが、↓のタブメニューの考え方がほぼ同じなのでご参考頂ければと思います。こちらのHTMLとスタイルを変えてしまう方が早いかも知れません。
      http://hack.aipo.com/archives/2967/

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません