0

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

if (document.documentElement.clientWidth < 768) {

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

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

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

       });

    })
}

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

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

谢谢，约臣

4

3 回答 3

1

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

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

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

于 2013-07-26T10:10:00.003 回答
0

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

于 2013-07-26T10:02:20.240 回答
0

您可以使用该resize事件。

$(window).resize(function() {
    // here your code
});
于 2013-07-26T10:02:28.623 回答