Question

我的移动导航仅运行低于1025px。我的问题是当桌面浏览器调整大小（或更大的平板电脑上的方向更改发生）从1024以上到以下时它不再激活脚本。我已尝试重新加载resize，但这并不理想，因为它会在每次调整大小时重新加载。

这是我的代码：

<script>
    $(window).bind('resize', function(e)
    {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function()
      {
        this.location.reload(false);
      }, 100);
    });

    if (document.documentElement.clientWidth <= 1024) {
      // Initialize mobile nav
    }
</script>

谢谢！

Answer 1

在每个分辨率中添加类并要求它们。

$( window ).resize(function() {
if(($(window).width()>1024 && $(".navigation").hasClass("mobile")) || ($(window).width()<1025 && $(".navigation").hasClass("desktop")))
this.location.reload();
}

但您应该考虑不重新加载，而是通过css媒体查询隐藏/显示导航。重新加载是用户体验的痛苦： - ）

更好的解决方案：

在你的css中：

.desktop {
    display: block;
}
.mobile {
    display: none;
}
@media only screen and (max-width: 1025px) {
.desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}

在你的HTML中：

<div class="navigation desktop">your desktop navigation</div>
<div class="navigation mobile">your mobile navigation</div>

不需要js。

如何在窗口宽度从桌面（> 1024px）更改为移动（＆lt; 1025px）导航时重新加载页面？

1 个答案: