masakichi-code

独学エンジニアの技術ブログ

スマホ・PCで画面幅を変えた時のアコーディオンメニュー暴発を防ぐ

  • JavaScript
  • WordPress

2022.11.22(火)

アコーディオンメニュー暴発を防ぐ_アイキャッチ画像

アコーディオンメニューを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で画面幅を変えた時のアコーデオンメニュー暴発を防ぐ』でした。