javascript - Jquery Nav 检测屏幕尺寸

Question

我的导航遇到了一个小问题。当我调整浏览器大小以检查移动菜单并单击下拉菜单的“标题”几次，然后将我的页面调整回平板电脑或桌面大小时，我的导航消失了。如果我删除这段代码，这个问题会自行解决:

if ( width == GetWidth() ) {
    return;
}
width = GetWidth();

但我需要这部分代码，这样当我在移动设备上向下滚动时，导航不会消失。

var screensize = document.documentElement.clientWidth;

$(document).ready(function(){
var isMobile = window.matchMedia("only screen and (max-width: 600px)");

if (isMobile.matches) {
$('#mobile_active li a').on('click',function() {    
$('.Back a').text('Back');
$('#mobile_active li ul li a').slideToggle(150);
e.preventDefault();
});
}

$(window).resize(function(){
if ( width == GetWidth() ) {
    return;
}
width = GetWidth();

if( $(window).width() < 600) {
    $('#mobile_active').hide();
} else {
    $('#mobile_active').show();
}
}); 

$('header').on('click', function() {
$('#mobile_active').slideToggle(500);
e.preventDefault();
});
});

任何建议或意见都会有很大帮助。谢谢。

Answer 1

我同意你应该为这类事情使用媒体查询和 javascript，但我想我已经找到了你的问题的原因。

在移动模式下，您的 <header> 附加了一个点击事件用slideToggle .这slideToggle设置 display:block; 的内联样式或 display:none;在 #mobile_active 上在动画之后；取决于它是关闭还是打开。当您调整到桌面大小时 #mobile_active仍然有 display:none; 的内联样式这就是为什么您再也看不到它了。

看起来您的 resize 上可能有代码可以更正此问题事件:

if( $(window).width() < 600) {
    $('#mobile_active').hide();
} else {
    $('#mobile_active').show();
}

我认为它只需要放在之前这个代码块:

if ( width == GetWidth() ) {
    return;
}
width = GetWidth();

这可能就是为什么当您删除它时，它仍然有效