响应式 JavaScript：“刷新”页面取决于屏幕宽度？答案

【问题标题】：Responsive JavaScript: "Refresh" page depending on screen width?响应式 JavaScript：“刷新”页面取决于屏幕宽度？
【发布时间】：2014-03-20 00:36:03
【问题描述】：

我制作了一个带有水平菜单的响应式网站。当达到较低的屏幕分辨率时，我想让菜单成为一个切换下拉菜单。 JQuery-Toggle 工作正常，我尝试这样做以“使其响应”：

if (document.documentElement.clientWidth < 768) {

    $(document).ready(function(e){

       $('#menubutton').on('click',function(){

          $('#main-nav').slideToggle();

       });

    })
}

这也可以，但不能直接在浏览器中更改窗口大小——我必须手动重新刷新页面才能加载脚本！

有没有办法在达到所需的屏幕宽度（768 像素）时“刷新”页面？ ……反之亦然！

谢谢，乔辰

【问题讨论】：

标签： javascript jquery responsive-design width screen-orientation

【解决方案1】：

也许您可以这样做，而不是在每次调整大小时刷新页面：

var mainNavActivated = false;
$(document).ready(function(e){
   $('#menubutton').on('click',function(){
        if(mainNavActivated || document.documentElement.clientWidth < 768){
            window.mainNavActivated=true;
            $('#main-nav').slideToggle();
        }
   });
})

无论如何都是绑定点击并使其在窗口“窄”时工作

【讨论】：

嘿，谢谢.. 这几乎是我想要的.. 是否可以通过将窗口大小调整到最大来使脚本“加载”？现在菜单消失了……
所以当你从一个狭窄的状态最大化窗口时，打开的菜单消失了？它是通过简单地调整到 768 以上宽度而消失还是仅在最大化时消失？
不，当我在加载脚本后将网站大小调整到高于 768px 的状态时，菜单会消失。将脚本加载到 768 像素，我可以使用切换。但反之亦然：脚本在调整大小后仍处于“切换模式”！我希望这说明清楚，英语不是我的母语 ;-)
所以，您希望在激活滑动菜单后，即使窗口重新调整大小，您也希望保持这种状态？我更新了我的答案
谢谢，但不，抱歉.. 我希望它被停用。但我想得越多，也许那个特定的东西（调整窗口大小后菜单消失）不是javascript代码的问题......嗯，我不知道......无论如何：非常感谢！

【解决方案2】：

您可以使用$(window).resize()。每次用户调整窗口大小时，它都会调用您的函数。

【讨论】：

【解决方案3】：

您可以使用resize 事件。

$(window).resize(function() {
    // here your code
});

【讨论】：

……我试过了，但现在的问题是：切换开关打开和关闭直到无穷大？！？！当我将窗口大小调整到最大时，菜单消失（脚本仍在加载）！？！
您应该每次检查尺寸是小还是大。如果它很小，你应该执行你的代码，否则你应该执行回滚。您必须考虑这两种情况。