[英]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.