Question

我创建了一个带有水平菜单的响应式网站。当达到较低的屏幕分辨率时，我想让菜单切换下拉。 JQuery-Toggle工作正常，我试着这个“让它响应”：

if (document.documentElement.clientWidth < 768) {

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

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

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

       });

    })
}

这也可以，但不是直接在浏览器中更改windowsize - 我必须手动重新刷新页面以加载脚本！

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

感谢名单，约亨

Answer 1

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

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

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

Answer 2

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

Answer 3

您可以使用resize事件。

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

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

3 个答案: