ace responsive menuでのサブメニューの折りたたまれ方について

前提・実現したいこと

スマートフォンでサブメニューを表示した場合にスクロールしてもメニューが折り畳まれず、固定したままにしたい。

発生している問題・エラーメッセージ

ace responsive menu というプラグインでスマートフォン（768px以下）でサブメニューを表示した場合に画面スクロールをするとサブメニューが畳まれてしまう

試したこと

chrome検証ではその様な現象は起きず、スマートフォンでスクロールしても畳まれない時もある等、何が原因か分からず困っています。どなたかご教授頂けるととてもありがたいです、よろしくお願いします。

該当ページのURLです
https://webthemez.com/demo/ace-responsive-menu/index.html

行動規範の内容に同意します

回答1件

ベストアンサー

URLにアクセスしてみました。私の環境でも同じようにスマホだとメニューが折りたたまれる現象が発生して、PCの検証だと発生しませんでした。
調べてみたのですが、ace-responsive-menu.jsの36行目のウィンドウがリサイズされたらメニューを畳む処理が行われてしまっていたようです。
（なぜスマホでスクロールしたときに発生したのかまではわかりませんでした…）

解決策として、以下のようにウィンドウ幅を変数で保存しておいて本当にウィンドウ幅が変わったか判定する処理を入れる方法はいかがでしょうか。

jQuery
1// アクセスした時のウィンドウ幅を保存
2var windowWidth = $(window).innerWidth();
3
4$(window).resize(function () {
5  // resizeが発生したら上記変数の値と今のウィンドウ幅を比較してウィンドウ幅が変わったかどうか判断
6  if(windowWidth != $(window).innerWidth()) {
7    menuCollapse();
8    // ウィンドウ幅の情報を更新しておく
9    windowWidth = $(window).innerWidth();
10  }
11});