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();

这可能就是为什么当你删除它时，它可以正常工作

Jquery Nav检测屏幕大小

1 个答案: