繁体   English   中英

视口js显示隐藏div

[英]viewport js show hide div

当视口较小时(例如:367px),我需要显示一个移动导航。 我不想使用媒体视口(也可以使用该视口,但是需要使用IE老版本的js来解决此问题)。

解决方案:

<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/

这对我有用:

 $(window).resize(function() {

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM