viewport js show hide div

Question

当视口较小时，我需要显示移动导航（例如:) 367px;。我不想使用媒体视口（也可以使用它，但需要使用js修复此问题，以及IE旧等）。

解决方案：

<script type="text/javascript"> 
 $(window).resize(function() {

    if ($(window).width() < 767) {
        $(".nav-mob").show();
        $(".nav-wide").hide();
    }
    else {
        $(".nav-wide").show();
        $(".nav-mob").hide();
    }
});
</script>

<style>
.nav-mob ul {display: none;}
.nav-mob{display: none;}
.nav-wide{display:block;}

@media screen and (max-width: 767px) {
.nav-wide {display: none!important;}
.nav-mob {display: block!important;}
}
</style>

---

错误的一个：

jQuery(document).resize(function () {
    var screen = $(window)    
    if (screen.width < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});


<div class="nav-mob" style="display:none; height:50px; width:200px; padding:30px; background:#f0c; margin:200px; position:absolute;">mobile</div>

<div class="nav" style="height:100px; width:300px; padding:30px; background:#cfc; margin:20px; position:absolute;">wide</div>

检查小提琴：http://jsfiddle.net/fvt8T/

Answer 1

这对我有用：

 $(window).resize(function() {

    if ($(window).width() < 367) {
        $(".nav-mob").hide();
        $(".nav").show();
    }
    else {
        $(".nav").hide();
        $(".nav-mob").show();
    }
});