12
携帯電話で使用するためにバニラのjavascriptを使用してメニューにスライドがありますが、これまでのすべてのテストでモバイルブラウザが最初のタップを無視してしまいました（両方のタッチを試しました&） 。 2番目のタップから始めると、それ以降の各タップで美しく機能します。最初のタブを無視してバニラのjavascriptをクリックします。
オープニングとして、メニューを閉じることはページ上の唯一のjavascript機能です。私は巨大なライブラリをロードしたくないので、単純で小さくしておきたいと思います。私のコードは以下の通りです：
var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
var n = document.getElementById('nav');
var ns = n.style.left;
if (ns == "-600px") {
n.style.left = "0px";
} else {
n.style.left = "-600px";
}
e.preventDefault();
});
これを初めてダブルクリックする必要はありませんか？
fwiw部門では、大きな画面ではナビゲーションメニューが、電話機ではスライドが表示されます。
編集：マット・スタイルのコメントに通じ、次の問題に
を解決し、私はclassList.toggleを使用してみました、それは問題を解決しました。最終バージョンは、以下である：
var b = document.getElementById('menubtn');
var n = document.getElementById('nav');
b.addEventListener('touchstart', function() {
n.classList.toggle('shwmenu');
setTimeout(function() {
b.classList.toggle('shwmenu');
}, 500);
});
Iは、閉と開状態との間のアイコンを切り替えること遅延menubtnコードを追加しました。
これはあなたの質問に直接答えるものではありませんので、コメントとして残しておきますが、クラスをオン/オフするために 'touchstart'を使用していないのはなぜですか？ [素子。その応答性の場合だけでなく、デスクトップ上で動作するようもののclasslist.toggle]（http://caniuse.com/#feat=classlist）をクリックイベントは、おそらく、より安全であり、それはどこでもあなたのコードを理解され、タッチデバイス用のほとんどユビキタスサポートしています実行されます。また、nav要素はクロージャの外側にある必要があります。つまり、各イベントでDOMにクエリを実行しないようにします。 –
@MattStyles - 私はclassList.toggleを試してみましたが、それは魔法のように動作します。提案していただきありがとうございます – Tom