jQuery：アコーディオンメニュー改訂版

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

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

以前作った上記アコーディオンメニューの改訂版です。
以前のものは一度開いたら開きっぱなしで複数のメニューが開きます。これはこれで仕様と考えれば問題ありませんが、2個めを開いたら1個めのものは閉じるという動きを加えました。

JavaScript

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

仕組みとしては、「toggle」をクリックしたらまず最初にアコーディオンのリストを全部閉じて「open」クラスもすべて除去するという、「全閉じ」をまず行っています。

そのうえでクリックした要素のみ開いています。こうすることでクリックしたものだけ開くような挙動になります。

…が、このサンプル自体ササッと作ったものなので今度は開いたもの自身をクリックしても閉じれないという状態ですが、最初の全閉じ処理で「クリックした要素自身は含めない」ともう一手間加えればこれも解決できると思います。コードが長く分かりづらくなりそうなので今回は割愛！