Почему мое навигационное меню исчезает при изменении размера браузера. Что я должен добавить в JQuery, чтобы предотвратить это?

Question

У меня есть простое меню навигации. Я добавил медиа-запрос, а точка останова - 400 пикселей. Все работает отлично, кроме одного, когда я расширяю меню в режиме «Мобильный», а затем нажимаю кнопку «Закрыть», все работает нормально. Но проблема возникает, когда я изменяю размер браузера с мобильного на ПК, все меню исчезает. Что я должен добавить в свой код JQuery, чтобы предотвратить эту проблему?

Примечание: Всякий раз, когда меню расширяется и я изменяю размер окна, он не исчезает. И я еще не забочусь о моделировании версии ПК. Я буду использовать его позже, как только эта проблема будет решена. Ссылка ниже. Пожалуйста, взгляните на это.
(JSFiddle)

HTML

<div class="close"><p>CLOSE</p></div> 
     <div class="menu-trigger"><div id="arrow">&#9660;</div><p>MENU</p></div> 
     <div class="nav-menu"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#" class="projects">Projects<div id="arrow-1">&#9660;</div></a> 
        <ul> 
         <li><a href="#">JQuery</a></li> 
         <li><a href="#">Web App</a></li> 
         <li><a href="#">Website</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Links</a></li> 
       <li><a href="#">Current Projects</a></li> 
      </ul> 
     </div> 

CSS

* { 
    font-family: sans-serif; 
} 
div .nav-menu { 
    background: #e7e7e7; 
    padding: 0 20px; 
} 
.nav-menu ul { 
    margin: 0; 
    padding: 0; 
} 
.nav-menu ul li { 
    list-style-type: none; 
    float: left; 
} 
.nav-menu ul li a:link, .nav-menu ul li a:visited { 
    display: block; 
    font-size: 90%; 
    padding: 10px 25px; 
    color: #305782; 
    text-decoration: none; 
    font-weight: bold; 
} 
.menu-trigger { 
    display: none; 
    color: #305782; 
    background: #d5dce4; 
    padding: 10px; 
    text-align: right; 
    font-size: 90%; 
    cursor: pointer; 
} 

.menu-trigger p { 
    line-height: 6px; 
    margin-top: 7px; 
    margin-bottom: 7px; 
    margin-right: 10px; 
    font-size: 1.3em; 
    font-family: sans-serif; 
} 


@media screen and (max-width: 400px) { 
    .menu-trigger { 
    display: block; 
    } 
    .nav-menu ul li { 
     float: none; 
     border-bottom: 1px solid gray; 
    } 
    .nav-menu ul li:last-child { 
     border-bottom: 0; 
    } 
    .nav-menu { 
     display: none; 
    } 
    .nav-menu ul ul { 
     display: none; 
    } 
    .nav-expanded {  /* will be added through jQuery */ 
     display: block; 
    } 
    .background {   /* will be added through jQuery */ 
     color: #d6d6d6; 
     background: #153448; 
     transition: 0.5s; 
    } 
    .background-1 {  /* will be added through jQuery */ 
     background: #2f5269; 
     color: aliceblue !important; 
     transition: 0.5s; 
    } 

    #arrow {   /* For the Main Menu Arrow */ 
     margin-right: 340px; 
     font-size: 1.4em; 
     line-height: 0; 
     position: absolute; 
     left: 25px; 
     top: 28px; 
     transition: 0.4s; 
    } 
    #arrow-1 {   /* For the SubMenu Arrow, Projects */ 
     float: right; 
     margin-right: 15px; 
     transition: 0.4s; 
    } 
    .rotated {   /* For Arrow, will be added through jQuery */ 
     transform: rotate(-180deg); 
    } 
    .close { 
     position: absolute; 
     right: 10px; 
     top: 9px; 
     background: #d5dce4; 
     color: aliceblue; 
     text-align: right; 
     width: 310px; 
     height: 36px; 
     z-index: 99; 
     cursor: pointer; 
     display: none; 
    } 
    .close p { 
     padding-right: 15px; 
     line-height: 5px; 
     text-align: right; 
     font-family: sans-serif; 
     color: black; 
    } 
} 

JQuery

$(document).ready(function(){ 
       $(".menu-trigger").click(function(){ 
        $(".nav-menu").slideDown(400); 
        $("#arrow").toggleClass("rotated"); 
        $(".close").fadeIn(); 
        $(".menu-trigger p").css("color", "#909090"); 
       }); 

       /* For Sub Menu Projects */ 
       $(".projects").click(function(){ 
        $(".nav-menu ul ul").slideToggle(); 
        $(".projects").toggleClass("background-1"); 
        $("#arrow-1").toggleClass("rotated"); 
        $(".nav-menu ul ul li a").css({"background":"#687583", "color":"white"}); 
       }); 
       /* For Closing All Menus */ 
       $(".close").click(function(){ 
        $(this).fadeOut(); 
        $(".nav-menu").slideUp(); 
        $(".nav-menu ul ul").slideUp(); 
        $("#arrow-1").removeClass("rotated"); 
        $(".projects").removeClass("background-1"); 
        $(".menu-trigger p").fadeIn(); 
        $(".menu-trigger p").css("color", "#3c3c3c"); 
        $("#arrow").toggleClass("rotated"); 
       }); 
      }); 

Answer 1

Когда вы используете функцию .slideUp(), свойство отображения элемента имеет значение «none». Поэтому ваше .nav-меню сохраняет «display: none»; после того, как вы закроете свое мобильное меню. Это заставляет меню оставаться скрытым после изменения размера окна браузера до размера рабочего стола.