为什么当我调整浏览器大小时我的导航菜单消失了.我应该在 Jquery 中添加什么来防止这种情况

Question

我有一个简单的导航菜单。我添加了一个媒体查询，断点为 400px。除了一件事之外，一切都很完美，每当我在移动视图中展开菜单，然后单击"关闭"按钮时，一切都很好。但是当我将浏览器大小从移动版本调整为 PC 版本时，问题出现了，整个菜单都消失了。我应该在我的 JQuery 代码中添加什么来防止此问题？

注意：每当菜单展开并且我调整窗口大小时，它都不会消失。而且我还没有照顾PC版本的样式。一旦这个问题得到解决，我将稍后对其进行样式设置。链接如下。请看一看。
（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;
    }
}

杰奎里

$(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 菜单在您关闭移动菜单后保持"显示：无;"。这将使菜单在将浏览器窗口大小调整为桌面大小后保持隐藏状态。