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

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 のクラスを加え、サンプルでは矢印を下に向けています。