不具合は出てくるもの

こんばんわ。

今日もイサラ模写です。これやり始めて６日目です。最近は、これが終了しない限り先に進めないと自分にプレッシャーをかけてやっています。

今日はアコーディオンメニューに大苦戦。本当に、丸一日かかりました。検索しつつなんとか実装したのですが、難しい。やっぱり予想しえないエラーだったり不具合は出てくるものです。

～今日の積み上げ～

・「それぞれのタイトル部分」をクリックしたら、「それぞれのタイトル部分の下の説明文」を表示させたかった。その「それぞれのタイトル部分の下の説明文」の指定の仕方が分からず、自力での実装を断念。

・複数あるsec14flowMenuTxtLpクラスを指定するためにeachメソッドを使用すること、slideUpやDownよりもslideToggleを用いればコードが短くて済むこと。

・アコーディオンメニューをすべて閉じるとメニュー全体が縮小されてしまう、ひとつでも開くとメニュー全体が元の大きさに戻る、という問題が発生。ちょっと強引な気もするけど、widthでサイズを無理くり指定して解決。

$(function(){
   $('.sec14flowMenuTxtLp').hide();//まず内容を非表示
   
   $('.sec14flowMenuHeadLp').click(function(){
   //.sec14flowMenuHeadLpがクリックされたら
   
       $('.sec14flowMenuHeadLp').not(this).removeClass('sec14flowMenuHeadLpOpen');
       //クリックされているsec14flowMenuHeadLp以外のオープンクラスを外す。
       
       $('.sec14flowMenuHeadLp').not($(this)).next().slideUp();
       //クリックされたsec14flowMenuHeadLp以外をスライドアップで非表示。
       
       $(this).toggleClass('sec14flowMenuHeadLpOpen');
       //オープンクラスのオンオフスイッチ。
       
       $(this).next().slideToggle();
       //sec14flowMenuHeadLpをスライド、アップダウン。
   });
});

今日参考にしたサイトはこちらです。本当に助かりました。

【jQuery】一つだけ展開＋矢印も同時に動くアコーディオンの実装 - Qiita

[jQuery] jQueryのアコーディオンの作り方 | beeyanblog

PC画面では普通の表示なのに対して、レスポンシブ版ではアコーディオンになるという、少々、初心者殺しの厄介な内容だったと思います。

プロゲートでの基礎が終わったはいいですが、やっぱりこういう所で活かせないと結局はダメなんだよなぁ…と少しがっかりでした。けどこれも収穫。今日上記の実装に一日かかりましたが、正解だったコードをしっかり理解し、メモしたので、次回からは一瞬で出来ます。

正念場が終わった気分で、若干ホッとしている自分がいます。毎日ポジティブに、ひとつひとつ、積み上げます。

それでは、浮かれる事なくまた明日も引き続き頑張ります。学ぶことはまだまだ星の数ほどあります。

それではおやすみなさい。