我创建了一个带有水平菜单的响应式网站。当达到较低的屏幕分辨率时,我想让菜单切换下拉。 JQuery-Toggle工作正常,我试着这个“让它响应”:
if (document.documentElement.clientWidth < 768) {
$(document).ready(function(e){
$('#menubutton').on('click',function(){
$('#main-nav').slideToggle();
});
})
}
这也可以,但不是直接在浏览器中更改windowsize - 我必须手动重新刷新页面以加载脚本!
当达到所需的屏幕宽度(768像素)时,有没有办法“刷新”页面? ......反之亦然!
感谢名单, 约亨
答案 0 :(得分:1)
也许不是在每次调整大小时刷新页面,你可以这样做:
var mainNavActivated = false;
$(document).ready(function(e){
$('#menubutton').on('click',function(){
if(mainNavActivated || document.documentElement.clientWidth < 768){
window.mainNavActivated=true;
$('#main-nav').slideToggle();
}
});
})
无论如何都是绑定点击并在窗口“缩小”时使其工作
答案 1 :(得分:0)
您可以使用$(window).resize()
。每次用户调整窗口大小时,它都会调用您的函数。
答案 2 :(得分:0)
您可以使用resize
事件。
$(window).resize(function() {
// here your code
});