リサイズ時に、開いていたハンバーガーメニューが閉じる設定ができない

Question

ハンバーガーメニューがあります。三本線のものです。それをクリックすると、三本線が×になってメニューが開くような設定は完了しています。ただ、それを開いたまま（×状態でメニューが開いた状態）で、**【ブラウザをリサイズすると、メニューが閉じて三本線に戻る】**という処理をしたいのですが、どうしてもできません。昨日から調べていますが出てきません。下記のようなjQueryではだめなのでしょうか？

ただ、これだと1200px以下になったら、という条件が設定されていますが、
希望としては、1200pxなどは関係なく、ブラウザをリサイズしたら、
という条件にしたいのです。
それが検索しても全然でてきませんでしたので・・・。

クラスは仮です。

$(window).on("resize", function(){
  if($(window).innerWidth() < 1200 ){
  //スマホの時の状態
    $(".r-sub-menu").stop();
  }
 	}); 

ご教授のほどどうかよろしくお願い致します。

Comments

[Lhankor_Mhy]

『1200pxなどは関係なく、ブラウザをリサイズしたら、という条件』であれば、条件文を削除してしまえばいいように思うのですが、上手くいきませんか？

[B_J]

いかないんです、、。

[Lhankor_Mhy]

では、
「こうなると思って」
「このコードを書いたが」
「実際はこうなった」
のように、予想・コード・結果をご提示ください。

コードは、その部分だけで問題が再現することをご確認の上でご提示ください。

[B_J]

下記でもだめでし$(window).on("resize", function () {
var w = $(window).width();
if (w < 1200) {
// ブレークポイント（単位：px）
window.location = window.location;
}
});

[Lhankor_Mhy]

そうでしょうとも。

Answer 1

下記でできました。
お時間いただきまして、誠にありがとうございました。

$(window).resize(function(){ // ウィンドウがリサイズされたら
var $window = $(this).width();
var bp = 1200;
if($window > bp){
$("#global_nav").show();
$("#drawer_toggle").removeClass("open"); // ×印をハンバーガーに戻す
}else{
$("#global_nav").hide();
$("#drawer_toggle").removeClass("open"); // ×印をハンバーガーに戻す
}

Answer 2

全体像がわからないのですが、たとえばこうすれば
チェックしていたものがリサイズするとはずれますか？
ハンバーガーメニューなのでチェックボックスでやるか
クラスでやるか次第だと思いますが・・・

<style>
#chk,#chk:not(:checked) ~ ul li{display:none}
</style>
<script>
window.addEventListener("resize",()=>{
  g1.style.display="";
  g2.style.display="none";
  chk.checked=false;
});
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
<rect width="48" height="48" id="r1" style="opacity:0" />
<g id="g1">
<line x1="10" y1="12" x2="38" y2="12" stroke="black"/>
<line x1="10" y1="24" x2="38" y2="24" stroke="black"/>
<line x1="10" y1="36" x2="38" y2="36" stroke="black"/>
</g>
<g id="g2" style="display:none">
<rect width="48" height="48" fill="none" />
<line x1="12.13" y1="12.63" x2="36.13" y2="36.13" stroke="black"/>
<line x1="12.38" y1="36.38" x2="35.88" y2="12.38" stroke="black"/>
</g>
<g>
</g>
<script>
r1.addEventListener('click',()=>{
  const flg=g1.style.display=="none";
  g1.style.display=flg?"":"none";
  g2.style.display=flg?"none":"";
  chk.checked=!flg;
});
</script>
</svg>
<input type="checkbox" id="chk">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<ul>

Comments

[B_J]

ありがとうございます。チェックボックスは使っていないのですが・・・

[yambejp]

ハンバーガーメニュー処理の一例です。
イベントとそれに伴う挙動は確認できませんか？

質問者さんの環境はこちらではわかりかねます