メディアクエリに基づいて表示を割り当てるjQuery .show（）を作成します。

Question

.hide（）エフェクトは、.show（）が呼び出されたときに復元するために、要素の表示値を保存します。

一致する要素は、アニメーションなしですぐに非表示になります。 これは、displayプロパティの値がjQueryの データキャッシュに保存され、後で表示を初期値に戻すことができる点を除いて、.css（ "display"、 "none"）を呼び出すのとほぼ同じです。 エレメントにインラインの表示値があり、表示されていない場合は がインラインで表示されます。

768までの画面に表示されるときに画面幅を使用すると、縦にiPadで開いていて、ナビゲーションを閉じるのであれば、その後に回転> 768とdisplay:block;ときしかし、私はdisplay:flex;あるナビゲーションUL要素を持っています水平位置で、ナビゲーションはdisplay:flex;になります。display:block;

現在私は@adnantopalからjquery.slimmenu.jsを使用しています。私はを受け取りました。これはに応じて.css('display:flex');が追加されましたが、Slimmenuのコマンドが優先します。

Answer 1

Javascriptを：

CSS @media queriesのjavascriptの同等はwindow.matchMedia次のとおりです。

var minWidth768px = window.matchMedia("(min-width:768px)"); 

if (minWidth768px.matches) { 
    ....CODE HERE... 
    } 

---

のjQuery：

最も近いjQueryの相当$(window).width()です。

しかし...あなたは自身の意志上$(window).width()もは、ウィンドウの右側にスクロールバーの幅を含めることに注意する必要があります。

ですから、このような何か実行する必要があります、あなたはjQueryのを使用している場合

if (windowWidth > 767) { 
     ....CODE HERE... 
     }