不具合は出てくるもの
こんばんわ。
今日もイサラ模写です。これやり始めて6日目です。最近は、これが終了しない限り先に進めないと自分にプレッシャーをかけてやっています。
今日はアコーディオンメニューに大苦戦。本当に、丸一日かかりました。検索しつつなんとか実装したのですが、難しい。やっぱり予想しえないエラーだったり不具合は出てくるものです。
~今日の積み上げ~
・「それぞれのタイトル部分」をクリックしたら、「それぞれのタイトル部分の下の説明文」を表示させたかった。その「それぞれのタイトル部分の下の説明文」の指定の仕方が分からず、自力での実装を断念。
・複数ある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をスライド、アップダウン。
});
});
今日参考にしたサイトはこちらです。本当に助かりました。
PC画面では普通の表示なのに対して、レスポンシブ版ではアコーディオンになるという、少々、初心者殺しの厄介な内容だったと思います。
プロゲートでの基礎が終わったはいいですが、やっぱりこういう所で活かせないと結局はダメなんだよなぁ…と少しがっかりでした。けどこれも収穫。今日上記の実装に一日かかりましたが、正解だったコードをしっかり理解し、メモしたので、次回からは一瞬で出来ます。
正念場が終わった気分で、若干ホッとしている自分がいます。毎日ポジティブに、ひとつひとつ、積み上げます。
それでは、浮かれる事なくまた明日も引き続き頑張ります。学ぶことはまだまだ星の数ほどあります。
それではおやすみなさい。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?