アコーディオンっぽいメニューを簡単に実装(自分以外のアコーディオンは閉じる)

最終更新日:2021.11.21 [日] 公開日:2020.03.16 [月] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

縦でも横でも、アコーディオンなメニューの要望はとても多いので、いつも自分が使うやり方をまとめました。



HTML

Javascript

$(this).toggleClass(“active”).next().slideToggle(200);
クリックした要素にactiveをつけて、次の要素をスライドダウンさせます。()内は速さの設定。

$(“.parent”).not(this).removeClass(“active”).next().slideUp(200);
これで自分以外の親要素からactiveクラスを外してスライドアップさせます

$(“.parent”).click(slide_menu);
.parentをクリックしたときにslide_menuの関数を実行。

CSS

結果


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA