アコーディオンメニューをJavaScriptで表示・非表示を切り替えるのはカンタンにできました。
スマホ表示ではアコーディオンメニューで押したら表示させる、PC表示ではすべて表示させようとしていました。
ですがコードを作成したところ、1回のクリックでビヨンビヨンと表示・非表示を繰り返す・・・
画面幅をリサイズする度にドンドン増えていきます。
以下、エラーのサンプルです。
Codepenで開いてサイズを変更して試してみてください。
ビヨンビヨンします。
See the Pen
アコーディオンメニュー エラー by masakichi (@masakichi09)
on CodePen.
PCでリサイズしたときにクリックイベントが溜まってしまい、クリックすると暴発するようです。
以下の記事を参考にoffイベントを噛ませたら解消されました!
off()を使うと対策可能。
出典: qiita.com
エラー解消したコードは以下の通りです。
See the Pen
アコーディオンメニュー解決 by masakichi (@masakichi09)
on CodePen.
以上、『スマホ・PCで画面幅を変えた時のアコーデオンメニュー暴発を防ぐ』でした。