Close
2023.7.31
BLOG
みなさん、こんにちは！
アコーディオンメニューを実装するとき、メニューが多いとメニューを開いていくと
どんどんページが長くなっていきますよね。
そのような場合、アコーディオンメニューをひとつ開いたら、開いている別のメニューが自動で閉じると
ページも長くなりすぎずに見やすくなるのにな〜と思います。
今回は、アコーディオンメニューをひとつ開いたら、
開いている別のメニューが自動で閉じる実装をしていきます。
完成形はこちらになります。
コードはこちら↓
1 2 3 4 5 6 7 8 9 | <dl class="faq__dlist"> <dt class="faq__term"> <p class="faq__term-txt">質問が入ります。質問が入ります。質問が入ります。</p> <div class="faq__term-btn"></div> </dt> <dd class="faq__desc"> <p class="faq__desc-txt">回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。</p> </dd> </dl> |
1 2 3 4 5 6 7 8 | $(function () { $(".faq__term").click(function () { $(this).next(".faq__desc").slideToggle(); $(".faq__term").not($(this)).next(".faq__desc").slideUp(); $(this).children(".faq__term-btn").toggleClass("is-open"); $(".faq__term").not($(this)).children(".faq__term-btn").removeClass("is-open"); }); }); |
上記のコードは、
該当する“.faq__term”をクリックすると、
.faq__term”の兄弟要素の“.faq__desc”をslideToggle()使って表示/非表示をする.faq__term”以外の兄弟要素の“.faq__desc”をslideUp()で閉じる.faq__term”の子要素の“.faq__term-btn”にクラス名“is-open”をつけたり外したりと切り替えをする.faq__term”以外の子要素の“.faq__term-btn”からクラス名“is-open”をとる
ひとつひとつ分解すると、どんなコードを書いたらいいのかが見えてきました。
