はじめに
こんにちは、フロントエンドエンジニア歴1年目で日々勉強中のズミです。
実はQiita初投稿・・ドキドキです。
記念すべき初投稿では、アコーディオン内のメニューをクリックしたあとに、アコーディオンが閉じてページ内リンク先に移動する動きの実装をご紹介します。
案件で実装するにあたり苦労したのですが、意外と短いコードで解決できました。
それでは、いきましょう！
まずはslideToggleでアコーディオンメニューを実装
jQueryのslideToggleを使い、ベースのアコーディオンメニューをつくります。
html
<divclass="menu-box"><divid="btn-accordion"class="menu_btn">メニューボタン（クリックして開閉）</div><ulclass="menu_list"><li><ahref="#sec_menu_01">メニュー１</a></li><li><ahref="#sec_menu_02">メニュー2</a></li><li><ahref="#sec_menu_03">メニュー3</a></li></ul></div>scss
.menu-box{position:fixed;top:10px;left:10px;width:350px;}.menu_btn{padding:10px;cursor:pointer;background-color:#5a6173;color:#fff;}.menu_list{display:none;// アコーディオンの中身を非表示にしておきます。margin:0;padding:5px10px;list-style:none;background-color:#f2f2f2;li{padding:5px0;a{text-decoration:none;color:#000;}}}js
$(function(){$('#btn-accordion').click(function(){$(this).next().slideToggle();});});ページ内リンク先に飛ぶアコーディオンメニューを実装
ページ内リンク先メニュー1〜メニュー3のsectionを用意します。
また、それぞれのsectionにスムーススクロールで遷移したいので、スムーススクロールの記述をjsに入れます。
html
<divclass="menu-box"><divid="btn-accordion"class="menu_btn">メニューボタン（クリックして開閉）</div><ulclass="menu_list"><li><ahref="#menu_01">メニュー１</a></li><li><ahref="#menu_02">メニュー2</a></li><li><ahref="#menu_03">メニュー3</a></li></ul></div><sectionclass="sec_01"><h1id="menu_01"class="title_01">メニュー1</h1><p>メニュー１です。</p></section><sectionclass="sec_02"><h1id="menu_02"class="title_02">メニュー2</h1><p>メニュー2です。</p></section><sectionclass="sec_03"><h1id="menu_03"class="title_03">メニュー3</h1><p>メニュー3です。</p></section>scss
.menu-box{position:fixed;top:10px;left:10px;width:350px;}.menu_btn{padding:10px;cursor:pointer;background-color:#5a6173;color:#fff;}.menu_list{display:none;// アコーディオンの中身を非表示にしておきます。margin:0;padding:5px10px;list-style:none;background-color:#f2f2f2;li{padding:5px0;a{text-decoration:none;color:#000;}}}section{height:1000px;&.sec_01{margin-top:60px;}h1{margin-top:-60px;padding-top:60px;}}js
// スムーズスクロール$('a[href^="#"]').click(function(){varspeed=400;varhref=$(this).attr("href");vartarget=$(href=="#"||href==""?'html':href);varposition=target.offset().top;$('body,html').animate({scrollTop:position},speed,'swing');returnfalse;});// アコーディオン$(function(){$('#btn-accordion').on('click',function(){$(this).next().slideToggle();});});しかし、このままでは、アコーディオン内のメニューをクリックしリンク先に遷移後も、メニューは開いたままになってしまいます。
これを解決するために、jsで下記のコードを追加します。
js
// スクロール// 省略// アコーディオン// 省略$(".menu_list li a").on("click",function(){$(".menu_list").slideToggle();});アコーディオン内のメニューをクリックしたら、slideToggleでアコーディオンの中身を非表示にする、という実装です。
たった3行で解決・・この実装を考えるまでに結構時間かかっちゃいました。
CodePenで実装してみたものが下記です。
See the Pen アコーディオン内メニュークリック時の動作 by Suzu (@suzuy) on CodePen.
最後に
しくみがわかるととてもシンプルな実装でしたが、案件で実装した当初は結構時間かけて調べて解決しました。
jsやjQueryでの実装がまだまだ弱いので、2021年はjsをある程度使いこなせるようになりたい・・いや、なる！！
最後までお読みいただきありがとうございました\（^^）/