如何在不刷新页面的情况下如何执行此操作？

-2

我正在使用CSS媒体和JQuery构建一个响应式网站。如何在不刷新页面的情况下如何执行此操作？

我创建了一个脚本来检查页面宽度：

if ($(window).width() < 1240) { 
$("#menu").toggle(); //hide menu 
    $('#body-wrap').toggleClass('shifted'); //puts the body width to 100% 
    $('#navbar').toggleClass('shifted'); //puts the navbar width to 100% 
}

但是，当我刷新页面验证码才有效。

我该如何自动执行此操作？

谢谢。

来源

2014-07-16 Steve Steve

使用CSS媒体查询。 – zzzzBov

将其置于resize事件中。

window.addEventListener('resize', function() { 
    // Your code 
});

你可能要考虑使用CSS来做到这一点，而不是，但（看看该媒体查询）

来源

2014-07-16 19:25:41

谢谢，现在正在工作 –

@SteveSteve请考虑点击此答案旁边的复选标记，如果它正确地回答了您的问题:-) – TylerH

@SteveSteve接受答案而不是评论，通过点击此左侧的勾号答案，这将有助于未来的游客参考这个答案... –

你必须将它添加到onresize事件： https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

此事件将在每次调整窗口大小时被调用，以便您可以响应这些更改。

但我认为一个更好的选择是使用CSS媒体查询，像这样：

@media only screen 
and (max-device-width : 1240px) { 

    #menu { 
     display: none; 
    } 
}

实例和信息上：不是的JavaScript http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

来源

2014-07-16 19:26:36 GolezTrol

如何在不刷新页面的情况下如何执行此操作？

回答

相关问题