javascript - 使用 Javascript 不显示 Css 导航

Question

我正在使用 javascript 进行响应式导航(优先使用移动设备)。在 600px 时，我使用媒体查询隐藏“菜单按钮”，但主导航仍应显示，但并没有发生。我尝试使用 javascript 来阻止它，但它不起作用

fiddle

当拖动屏幕变大时，导航被完全移除，这不应该发生

<header>
    <div class="container">
        <a href="#" id="logo">Logo</a>
        <div id="toggleNavMain">Menü</div>
        <nav>
            <ul id="navMain">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div><!--container-->
</header>

使用了 Javascript

$(function() {
    var pull        = $('#toggleNavMain');
        menu        = $('#navMain');
        menuHeight  = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle('fast');
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

CSS

.container {
    max-width: 1070px;
    margin: 0 auto;
}

header {
    background-color: #FFCCCC;
    overflow: hidden;
}

#logo {
    background:url(http://placehold.it/220x80) 0 0 no-repeat;
    height: 80px;
    display: block;
    width: 220px;
    margin-bottom: 50px;
    text-indent:-9999px;
}

#toggleNavMain {
    display:block;
    position: absolute;
    right: 15px;
    top: 40px;
    background: #e3bf91;
    padding: 2% 3%;
    font-size:1.2em;
    cursor:pointer;
}

#navMain {display:none;}

#navMain {
    list-style: none;
    padding: 0;
}

#navMain li {
    text-align:center;
    float:left;
    width:100%; 
    margin-bottom:1%;
    background-color: blue;
}

#navMain li a {
    display: block;
    padding: 2% 0;
}


@media screen and (min-width: 600px) { 

#toggleNavMain {display:none;}

}

Answer 1

如果屏幕尺寸小于 600px，您可以使用额外的媒体查询来隐藏菜单 ul

EXAMPLE HERE

@media screen and (max-width: 600px) {
    #navMain {
        display:none;
    }
}