爲什麼在調整瀏覽器大小時，我的導航菜單消失了。我應該在Jquery中添加什麼來防止這種情況？

Question

我有一個簡單的導航菜單。我添加了一個媒體查詢，斷點是400px。除了一件事以外，每件事情都很完美，只要我在移動視圖中展開菜單，然後點擊關閉按鈕，一切正常。但是，當我將瀏覽器從手機調整到PC版本時，出現問題，整個菜單消失。我應該在我的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（）函數時，元素的display屬性設置爲「none」。所以你的.nav菜單保持「display：none;」關閉手機菜單後這會讓您在將瀏覽器窗口調整爲桌面大小後隱藏菜單。