8wired

とりあえずやってみるブログ

STINGER5のアコーディオンメニューがスマホ表示で開かないとき

2016/06/14

ある日、スマホで表示確認している時にページ右上にあるMenuが反応しないことがある事に気が付きました。正常に動作すればMenuをクリックすると、Menuとサイトタイトルの間にカスタムメニューがスライドして現れるのですが、ダメなときはクリックしても何の反応もありません。

状況を検証している最中、問題なく動作していた状態だったにも関わらず、スリープから復帰するときにアコーディオンメニューが開かないという状況に遭遇。もしやと思って改めてソースを確認したところ、アコーディオンメニューの開閉は、base.jsの中でJQueryを使って行われていたので、この現象はbase.jsもしくはjquery.jsの読み込みが不完全な状態のときに発生していたのではないかと思います。

Asynchronous JavascriptなどのJavascriptを非同期で読み込むプラグインを利用していると、この現象がより顕著に発生します。プラグインをオフにすると読み込みが完了する前でもすんなりアコーディオンが開くことが確認できたので、Asynchronous Javascriptで該当するJavascriptの非同期化を除外したところ状況は改善しました。

設定方法は、「STINGER5でAsynchronous Javascriptを使うときの設定」をご覧ください。

この様な状況だったので、アコーディオンメニューが開かなくて、Javascriptを非同期で読み込むプラグインを利用している場合には、プラグインでbase.jsとjqueryの読み込みを除外しておけば開きやすくなるかもしれません。

それ以外の場合にも、このJavascript周りを中心に確認してみると問題となっている原因が見つかりやすいかもしれません。

尚、これらの動作検証を行うときにはW3 Total Cacheなどのキャッシュ系プラグインを停止して行わないと原因の判別が難しくなるので、プラグインを停止してから行うことをお薦めします。

2014/11/28追記:

下記のプラグインによる影響を受ける場合もあるようです。上記の方法で解消されない場合には、参考にしてみてください。

-WordPress
-