javascript - レスポンシブ ナビゲーション メニューのサイズ変更?

Question

非常にシンプルなレスポンシブ ナビゲーション メニューを構築しようとしています。ここでいくつかの問題が発生しています。

1. ウィンドウのサイズを幅 768 ピクセル以下に変更すると、レスポンシブ メニューが機能しなくなります。
2. 768 ピクセル以下のウィンドウ幅でページを更新すると、レスポンシブ ナビゲーションが機能しますが、1 ピクセルでもサイズを変更すると、レスポンシブ ナビゲーションの表示が再び非表示になります。

ここで CodePen を作成しました: http://codepen.io/anon/pen/fHsti

手伝ってくれてどうもありがとう！

Answer 1

正直なところ、これにアプローチする最善の方法は、メディア クエリ間のナビゲーションの状態を管理するためだけに JS を使用することです。それ以外はすべてメディア クエリに格納する必要があります。MediaCheckやmatchMediaなどは、メディア クエリと JS を結び付ける優れた方法です。

マークアップを使用して簡単なデモを作成しました。探していた機能が得られたと思います。mediaCheck を使用して、768px のメイン ブレークポイントの間にある JS によって課されたインライン スタイルをすべてクリアしました。