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

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

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

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

jquery
1window.addEventListener('DOMContentLoaded', function(){
2        $("button").click(function(){
3            $("nav ul").slideToggle(200);
4});
5});

html
1<div class="container-wrapper">
2    <header>
3        <div class="header-logo">
4            <img src="/img/logo.png" alt="">
5        </div>
6                <button><img src="/img/button.png" alt="" class="icon-img"></button>
7        <nav>
8            <ul>
9                <li><a href="#"><span class="first-child">card</span></a></li>
10                <li><a href="#">news</a></li>
11                <li><a href="#">price</a></li>
12                <li><a href="#">access</a></li>
13                <li><a href="#">contact</a></li>
14            </ul>
15        </nav>
16    </header>
17</div>

sass
1.container-wrapper {
2  width: 100%;
3  z-index: 1;
4
5header {
6width:100%;
7max-width: 1366px;
8height: 100px;
9background: #3F51B5;
10overflow:hidden;
11opacity: 1;
12
13@include mq('sp') {
14height: 80px;
15}
16}
17
18.header-logo {
19position: relative;
20top: 31px;
21bottom: 30px;
22margin-left: 140px;
23margin-right: 0;
24width: 200px;
25height: 39px;
26opacity: 1;
27
28@include mq('tab') {
29  width: 150px;
30  
31}
32@include mq('sp') {
33  top: 21px
34}
35
36}
37button {
38position: relative;
39background-color: #3F51B5;
40border: 1px solid #3F51B5;
41height: 100%;
42top: -25px;
43float: right;
44display: none;
45@include mq('sp') {
46display: inline-block;
47   }
48 }
49
50.icon-img{
51
52  width: 30px;
53  top: 0px;
54  position: relative;
55  float: right;
56  margin-right: 20px;
57  z-index: 1;
58  top: -10px;
59
60  @include mq('sp') {
61    display: inline-block;
62  }
63}
64
65  
66
67  
68
69nav {
70position: relative;
71width: 344px;
72height: 26px;
73opacity: 1;
74float: right;
75margin-right: 140px;
76z-index: 1;
77
78@include mq('tab') {
79  margin:0 10px;
80}
81
82@include mq('sp') {
83 bottom: 10px;
84}
85
86}
87ul {
88letter-spacing: 0;
89opacity: 1;
90display: flex;
91list-style: none;
92margin: 0;
93padding: 0;
94font-weight: normal;
95font-size: 16px;
96z-index: 2;
97
98}
99
100nav ul {
101  @include mq('sp') {
102    display: none;
103    position: absolute;
104    z-index: 2;
105    background-color: #3F51B5;
106    right: -72px;
107    top: 50px;
108
109  }
110}
111
112
113li a{
114  margin-right: 24px;
115  text-transform: capitalize;
116  color: #FFFFFF;
117  text-decoration: none;
118  background:#3F51B5;
119  z-index: 1;
120
121
122  @include mq('tab') {
123    margin-right: 12px
124  }
125}
126.first-child{
127  text-decoration: underline red;
128  margin-top: 0.5px;
129}
130
131
132}
133コード

行動規範の内容に同意します

回答1件

ベストアンサー

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

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