質問: ### 前提 レスポンシブでグローバルナビゲーションを作っています。 ウィンドウの幅をドラッグして大きくしたり小さくしたりした場合に、リアルタイムでウィンドウ幅を感知して、スマートフォン、PCサイトで異なる動きをさせたく思っていますがうまくいきません。 ※ウィンドウ幅感知の部分をのぞけば意図通りの動作をしています。 ### 実現させたい仕様 **■スマートフォン(767pxまで)** 二階層目があり、それも開閉 > > - - - - - - - - > > 会社概要 ↓ > > - - - - - - - - > > 商品 ↓ > > - - - - - - - - > > > それぞれをクリックしたら二階層目が展開する。 矢印の向きが「↑」に変化し、クリックしたら再び閉じて「↓」になる。 > > - - - - - - - - > > 会社概要 ↑ > > - - - - - - - - > > > 沿革 > > - - - - - - - - > > > 地図 > > - - - - - - - - > > 商品 ↑ > > - - - - - - - - > > > 商品A > > - - - - - - - - > > > 商品B > > - - - - - - - - > > > **■PCサイト(768px以上)** クリックしても二階層目は開閉させない。 > > | 会社概要 | 商品 | > > > ### 現在の記述 ※「Window幅を感知して処理を変える」以外の部分は意図通り動作する ``` 会社概要 沿革 地図 商品 商品A 商品B ``` ``` $(window).on('load resize', function(){//window幅に変更があった場合に感知させたい(が、うまくいっていない) if( window.matchMedia('(max-width:767px)').matches ){//スマートフォンの場合 $('.dropdown').on('click','> .open', function(e){ e.preventDefault(); $(this).next('ul') .slideDown('fast', function(){ $(this).prev('.open').removeClass().addClass('close'); }) }).on('click','> .close', function(e){ e.preventDefault(); $(this).next('ul') .slideUp('fast', function(){ $(this).prev('.close').removeClass().addClass('open'); }) }); }else{//それ以外(PCの場合) $('.dropdown').children('a').next('ul').hide(); } }); ``` ``` @media only screen and (max-width: 767px) { .dropdown > .open::after { content: '↓'; } .dropdown > .close::after { content: '↑'; } } @media only screen and (min-width: 768px) { .dropdown ul{ //今のところ特に何も記述はしていないが display:none !important;を入れるべき?(後述) } } ``` 上記の記述で、PC幅でリロード、スマートフォン幅でリロードした場合、それぞれ意図した動きになっています。 ただ、ウィンドウの幅をマウスをドラッグして変更した時下記の動きになります。 **1最初PCウィンドウ→2スマートフォンサイズにせまくする→3再びPCウィンドウサイズにする** 1、2までは意図通りの動きをします。 3になると「会社概要」や「商品」をクリックすると二階層目が展開されるようになってしまいます。 ### 補足 そもそもウィンドウの幅を任意で変えるユーザーはいないような気もしますのでこのような処理は必要ないのかもしれませんが向学のため、なぜ条件分岐通りに動かないのか知りたく思っています。 またCSSのメディアクエリ「min-width:768px」で二階層目のメニューを「**display: none !important;**」で非表示にしたら良いかとも思ったのですが、 1最初PCウィンドウ→2スマートフォンサイズにせまくする→3再びPCウィンドウサイズにする 上記のステップの1で一階層目のメニューをクリックしてから2にすると二階層目が展開されない状態で矢印が上を向いてしまいます。 --- ウィンドウサイズを変更した場合、リロード無しでPC⇔スマートフォンでそれぞれ仕様通りの動きを反映させるにはどのように記述をするべきなのでしょうか?ご教授いただけますと助かります。どうぞよろしくお願いいたします。
回答: 質問の回答というわけでは無いですが、 レスポンシブだとフラグ管理が複雑になってしまうので、 自分の場合、極力CSSのメディアクエリでimportant指定をして、 動きを固定するようにしていますね。 例えば、スマホサイズの時サブメニューが展開される部分を、 PCサイズではimportant指定で展開されない様にします。