jQuery로 응답 메뉴와 혼동하기

Question

내 응답 메뉴는 모바일 메뉴에서 잘 작동하지만 큰 화면 크기로 다시 브라우저 크기를 조정할 때 한 가지 문제가 있습니다. 모바일 메뉴가 계속 표시됩니다. 왜 아무도 알지 못해? 여기

내 코드입니다 :

CSS

.main-navigation ul { 
    z-index: 999; 
    float: right; 
    font-size: 1rem; 
} 

.main-navigation ul>li { 
    float: left; 
    position: relative; 
} 

.main-navigation ul>li a { 
    color: #555; 
    height: 42px; 
    line-height: 42px; 
    margin-left: .5em; 
    padding-right: 1em; 
    position: relative; 
} 

.main-navigation ul>li ul { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    visibility: hidden; 
    -webkit-transition: opacity .1s ease-in; 
    -moz-transition: opacity .1s ease-in; 
    -o-transition: opacity .1s ease-in; 
    transition: opacity .1s ease-in; 
    position: absolute; 
    background: white; 
    left: -1em; 
} 

.main-navigation ul>li ul li { 
    float: none; 
    white-space: nowrap; 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    background: #f9f9f9; 
} 

.main-navigation ul>li ul li a { 
    padding: 0 1em; 
    margin-right: 0; 
    font-weight: normal; 
} 

.main-navigation ul>li ul li a::before { 
    content: ''; 
} 

.main-navigation ul>li ul li ul { 
    border-top: 1px solid #fff; 
    position: absolute; 
    left: 100%; 
    top: -1px; 
    height: 21px; 
    line-height: 21px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    visibility: hidden; 
    -webkit-transition: opacity .1s ease-in; 
    -moz-transition: opacity .1s ease-in; 
    -o-transition: opacity .1s ease-in; 
    transition: opacity .1s ease-in; 
} 

.main-navigation ul>li:hover>ul { 
    opacity: 10; 
    filter: alpha(opacity=100); 
    visibility: visible; 
} 

.main-navigation ul>li:hover>a { 
    color: #e74c3c; 
} 

@media only screen and (max-width:479px) { 


.main-navigation ul { 
    z-index: 999; 
    float: right; 
    font-size: 1rem; 
} 

.main-navigation ul>li { 
    float: left; 
    position: relative; 
} 

.main-navigation ul>li a { 
    color: #555; 
    height: 42px; 
    line-height: 42px; 
    margin-left: .5em; 
    padding-right: 1em; 
    position: relative; 
} 

.main-navigation ul>li ul { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    visibility: hidden; 
    -webkit-transition: opacity .1s ease-in; 
    -moz-transition: opacity .1s ease-in; 
    -o-transition: opacity .1s ease-in; 
    transition: opacity .1s ease-in; 
    position: absolute; 
    background: white; 
    left: -1em; 
} 

.main-navigation ul>li ul li { 
    float: none; 
    white-space: nowrap; 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    background: #f9f9f9; 
} 

.main-navigation ul>li ul li a { 
    padding: 0 1em; 
    margin-right: 0; 
    font-weight: normal; 
} 

.main-navigation ul>li ul li a::before { 
    content: ''; 
} 

.main-navigation ul>li ul li ul { 
    border-top: 1px solid #fff; 
    position: absolute; 
    left: 100%; 
    top: -1px; 
    height: 21px; 
    line-height: 21px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    visibility: hidden; 
    -webkit-transition: opacity .1s ease-in; 
    -moz-transition: opacity .1s ease-in; 
    -o-transition: opacity .1s ease-in; 
    transition: opacity .1s ease-in; 
} 

.main-navigation ul>li:hover ul { 
    opacity: 10; 
    filter: alpha(opacity=100); 
    visibility: visible; 
} 

.main-navigation ul>li:hover>a { 
    color: #e74c3c; 
} 

}

HTML :

<a href="#" id="rwd-nav-btn" >&#9776;</a> 
<div class="rwd-nav"></div> <!-- end rwd-nav --> 

<nav class="main-navigation"> 

          <ul class="fr"> 
           <li><a href="">home</a></li> 
           <li><a href="">articles</a></li> 
           <li><a href="">portfolio</a></li> 
           <li> 
            <a href="">dropdown</a> 

            <ul> 
             <li><a href="">home</a></li> 
             <li><a href="">articles</a></li> 
             <li><a href="">portfolio</a></li> 
             <li> 
              <a href="">dropdown</a> 

              <ul> 
               <li><a href="">home</a></li> 
               <li><a href="">articles</a></li> 
               <li><a href="">portfolio</a></li> 
               <li> 
                <a href="">dropdown</a> 
               </li> 
               <li><a href="">about</a></li> 
               <li><a href="">contact</a></li> 
              </ul> 
             </li> 
             <li><a href="">about</a></li> 
             <li><a href="">contact</a></li> 
          </ul> 

         </li> 
         <li><a href="">about</a></li> 
         <li><a href="">contact</a></li> 
        </ul> 
        </nav> 

jQuery를 :

jQuery(document).ready(function(){ 
    jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav'); 


    jQuery('#rwd-nav-btn').click(function(event){ 
     event.preventDefault(); 
     jQuery('.rwd-nav').slideToggle(); 
    }); 

Answer 1

메뉴를 숨기는 코드가 없습니다. 대신 slideToggle, 나는이 "폐쇄"와 "개방"과 같은 클래스를 추가/제거하는 것이 좋습니다 및 display:none에 mymenu.closed를 설정하고 미디어 쿼리 내부에 제공된 코드에 display:block