Home>
I want to achieve

I want to close the accordion menu according to the whindow size.

What is the problem

The accordion menu is displayed with a window size of 767px or less.
Pressing the button closes the accordion menu.
If i set the window width to 767px or more without pressing the button, the accordion menu will remain unnatural.

I want to solve

I want the accordion menu to close automatically depending on the window size.
What kind of jquery should I write?

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

    <header>
        
            
        
                <button></button>
        <nav>
            <ul>
                <li><span>card</span></li>
                <li>news</li>
                <li>price</li>
                <li>access</li>
                <li>contact</li>
            </ul>
        </nav>
    </header>
. 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;
}

}
Code
  • Answer # 1

    Check the window size for each window resize,
    I think that it is easy to make SlideUp when it is more than 768px.

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

Related articles