アコーディオンメニューを開いたままpcサイズにするとのこってしまうのをなくしたい！

Question

前提・実現したいこと

cssのレスポンシブで横画面800px以上の時はdisplay:none にしているのですが、jQuery でアコーディオンを実行したあと画面を広くするとそのままのこってしまうのでそれを非表示にしたいです。

### 試したこと

javascript
$(window)
    .resize(function () {
      var x = $(window).width();　　///横幅を取得////
      var y = 800;
      if (x > y) {　　　////横画面が800よりも大きいとき////
        $(".minimenu").addClass("remove");  ////要素にクラスを追加///
      } else {
        $(".minimenu").removeClass("remove");
      }
    });

###css (removeクラスの中身）
.remove{
display:none;
}

800以上の時にremoveクラスをまたべつで追加して800以下のときはこれをなくすようにしてみたのですが、変化なしでした。。

###補足

初の質問でプログラミングの知識もままならないので、わかりずらいかもしれませんがよろしくおねがいします。

Answer 1

解決したのでのせておきます。同じように困っているかたがいらっしゃいましたら参考にしてみてください！また他に簡単な方法とかありましたら教えていただけると助かります！

コード
 $("#menubtn").click(function () {
    if ($(".minimenu").hasClass("hasmenu")) {    ////css上では存在しないhasmenuクラスを作成////
      $(".minimenu").slideUp(); ////存在する場合minimenuを非表示し、hasmenuクラスを除外////
      $(".minimenu").removeClass("hasmenu");
      $("#menubtn").html('<i class="fas fa-bars"></i>');　　////menubtnのアイコンなので気にしないでください///
    } else {
      $(".minimenu").slideDown();  ///hasmenu が存在しない場合minimenuを表示し、hasmenuクラスを追加///
      $(".minimenu").addClass("hasmenu");
      $("#menubtn").html('<i class="fas fa-times"></i>'); ///同じくmenubtnのアイコンなのできにしないでください///
    }
  });

  $(window).resize(function () {
    var x = $(window).width(); ///横幅を取得////
    var y = 800;
    if (x > y) {
      ////横画面が800よりも大きいとき////
      $(".minimenu").css("display", "none"); ////cssを変更してdisplayを隠す///
    } else if ($(".minimenu").hasClass("hasmenu")) {　　///もし800より小さくてhasmenuクラスがあればdisplay:blockにする///
      $(".minimenu").css("display", "block");
    }
  });

コードについてコメントいただければなるべく返信します！

Answer 2

発想を逆にした方が詳細度などの関係からシンプルになりそうです。

つまり、removeクラス追加で非表示にするのではなく、openクラス追加で表示というように。

例えば、

.minimenu {
    display: none;
}

.minimenu.open {
  display: block;
}
  
@media screen and (min-width: 800px) {
  .minimenu.open {
    display: none; /* 800px以上では非表示 */
  }
}

HTMLとかCSSが不明なので推測ですが。

Comments

[rio_beginner]

ごめんなさい、自分の質問が言葉足らずでした。。display:block の状態で画面サイズを大きくするとサイトごと再読み込みしない限りそのままdisplay:noneにならずにのこってしまいます。ですが発送を逆にするっというのは勉強になりましたいろんな角度から見れるようにがんばります！回答ありがとうございます

[hatena19]

メディアクエリで800px以上は display:none になるように設定しておけば、javascript無しで実現できます。
これで分からなければ、HTMLとCSSを提示してもらえれば、アドバイスはできます。

[rio_beginner]

わざわざありがとうございます！javascriptをつかっておりますが、一応自己解決しました！そちらのコードを審査？していただけるとうれしいです！！
メディアクエリで最初やろうとしたんですけど、いうこときいてくれなかったんですよね。。多分javascriptでslideDownするから上書きかなんかされてしまうんだとおもいますあくまで予想ですけど（笑）