windowサイズに合わせてslideToggleを自動で閉じたい

Question

##　実現したいこと
whindowサイズに合わせてアコーディオンメニューを閉じたい。

##　問題になっていること
windowサイズ767px以下でアコーディオンメニューを表示しています。
ボタンを押せば、アコーディオンメニューは閉じるようになっています。
ボタンを押さずにwindow幅を767px以上にすると、アコーディオンメニューが不自然に残ってしまいます。

##　解決したいこと
windowサイズによってアコーディオンメニューが自動で閉じるようにしたいです。
どのようなjqueryを書けばよろしいでしょうか？

window.addEventListener('DOMContentLoaded', function(){
        $("button").click(function(){
            $("nav ul").slideToggle(200);
});
});

<div class="container-wrapper">
    <header>
        <div class="header-logo">
            <img src="/img/logo.png" alt="">
        </div>
                <button><img src="/img/button.png" alt="" class="icon-img"></button>
        <nav>
            <ul>
                <li><a href="#"><span class="first-child">card</span></a></li>
                <li><a href="#">news</a></li>
                <li><a href="#">price</a></li>
                <li><a href="#">access</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
</div>

.container-wrapper {
  width: 100%;
  z-index: 1;

header {
width:100%;
max-width: 1366px;
height: 100px;
background: #3F51B5;
overflow:hidden;
opacity: 1;

@include mq('sp') {
height: 80px;
}
}

.header-logo {
position: relative;
top: 31px;
bottom: 30px;
margin-left: 140px;
margin-right: 0;
width: 200px;
height: 39px;
opacity: 1;

@include mq('tab') {
  width: 150px;
  
}
@include mq('sp') {
  top: 21px
}

}
button {
position: relative;
background-color: #3F51B5;
border: 1px solid #3F51B5;
height: 100%;
top: -25px;
float: right;
display: none;
@include mq('sp') {
display: inline-block;
   }
 }

.icon-img{

  width: 30px;
  top: 0px;
  position: relative;
  float: right;
  margin-right: 20px;
  z-index: 1;
  top: -10px;

  @include mq('sp') {
    display: inline-block;
  }
}

  

  

nav {
position: relative;
width: 344px;
height: 26px;
opacity: 1;
float: right;
margin-right: 140px;
z-index: 1;

@include mq('tab') {
  margin:0 10px;
}

@include mq('sp') {
 bottom: 10px;
}

}
ul {
letter-spacing: 0;
opacity: 1;
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-weight: normal;
font-size: 16px;
z-index: 2;

}

nav ul {
  @include mq('sp') {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: #3F51B5;
    right: -72px;
    top: 50px;

  }
}


li a{
  margin-right: 24px;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
  background:#3F51B5;
  z-index: 1;


  @include mq('tab') {
    margin-right: 12px
  }
}
.first-child{
  text-decoration: underline red;
  margin-top: 0.5px;
}


}
コード

Answer 1

ウィンドウのリサイズごとにウィンドウサイズを確認して、
768px以上の時にslideUpさせるのが簡単かなと思います。

$(window).on('resize', function () {
    if (window.matchMedia('(min-width:768px)').matches) {
          $("nav ul").slideUp(200);
     }
});

Comments

[kaaaarin]

せっかく回答していただいたにも関わらず、返信が遅くなってしまい、申し訳ございません。
回答していただいた方法で、うまくいきました。本当にありがとうざいました。