CSS导航未使用JavaScript显示

Question

我正在使用javascript进行响应式导航（首先工作移动）。当在600px时，我使用媒体查询隐藏"菜单按钮"，但是仍应显示主要导航，这不会发生。我尝试使用JavaScript预防它，但它不工作

小提琴

拖动屏幕更大时，导航被完全删除，这不应发生

<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

示例此处

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

Answer 2

http://jsfiddle.net/xxpgg/1/

我认为这就是您想要的。

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