質問: 現在HTMLで他のサイトを参考にしてホームページを作っています。 javascriptやjQueryの知識がほぼなく、見よう見まねで作成している状態です。 やりたいことは、以下です。 ・ヘッダー画像をスライダーさせる(skippr使用) ・スマホ時にハンバーガーメニューを表示させる スライダーはPC版では通常に動いていますが、スマホ表示にすると動かないです。 ハンバーガーメニューも表示されているのですが、タップしてもメニューが表示されない状態です。 以下は、htmlファイルに記述しているjavascriptのコードです。 ``` ``` skipprはレスポンシブル対応とあったので、スマホでも動作すると思うのですが、 見た感じ、スマホ表示にさせたときにjavascriptが動いていないようです。 なぜ、動作しないのかわらからず途方に暮れています。 どうぞご教授下さい。 URLは、以下です。 http://suisankakou.tk/
回答: skipprは余り詳しくないので適当なのですが、以下を指定してみるとどうでしょうか。 // 実行タイミングの調整(ready後発火) $("document").ready(function() { $("#theTarget").skippr(); }); clickイベントはPCとスマホで動作が異なるようになることが多いです。特にiOSのサファリで良く発生する問題ですね。 マウスカーソルとタッチ操作の処理の違いから起きるみたいで、よく不具合として発生する問題です。 以下のコードではcssでcursor: pointerをクリックさせたい要素に指定し、タッチ操作でもマウスでクリックされたようにjs側で判定させるようにしています。後述のjs方法1と方法2次第ではいらないかもしれません。 js-方法1 クリックイベントのタイプをスマホとPCで切り替えさせています。PCならclick、スマホならtouchstartでイベントを発火させるようにしています。こちらはcssのcursol指定はいらないかもしれません。 js-方法2 クリックイベントのバインド先をルート要素(document)に指定し、バインド先からイベント対象を指定することで対応させています。 cssを指定して方法1か2を指定すれば恐らくできるのではないかと思いますが、出来なければ方法1と2の組み合わせも試してみて下さい。 ``` .menu-trigger, .btn-nav--sp a{ cursor: pointer; /* クリックさせたい要素に指定 */ } ``` ``` // 方法1 // clickイベントでの処理(mouseenter は省略) var clickEventType=((window.ontouchstart!==null)?'click':'touchstart'); $('.menu-trigger').on(clickEventType, function() { // クリック、タップ時の処理を記述 }); // 方法2 $(document).on("click", ".menu-trigger", function() { // クリック、タップ時の処理を記述 }); ```