當窗口寬度小於766px時做些什麼

Question

我試圖做出響應下拉菜單欄，並且我想在PC和手機之間設置不同的jQuery事件。

所以我做了一些jQuery的事件......

做的東西，如果窗口寬度小於767px要不....

這是我在這裏的代碼。

$(document).ready(function(){ 
    if ($(window).width() < 767) { 
     $('.mGnb a').click(function() { 
      $('#subLayer').slideToggle(200); 
      return false; 
     }); 
    } 
    else { 
     $('.mGnb a').hover(function() { 
      $('#subLayer').slideUp(200); 
      return false; 
     }); 
    }); 
}); 

它工作正常。但問題是當我調整窗口大小時，jQuery不起作用。當我調整和刷新（F5）頁面時，它工作。

我需要解決什麼問題？

Answer 1

問題是你的寬度只能通過$（document）.ready（）計算得到，你應該找到一種方法來重新計算它每隔x秒鐘的時間，如計時器等。

setInterval(function(){ 
var width = $(".element").width(); 
},100); 

這樣，可變寬度將每隔0.1秒更新一次。

Answer 2

使用這樣的：

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

Answer 3

您可以使用window.matchMedia，例如：

if (window.matchMedia("(max-width: 765px)").matches) { 
    /* mobile view related javascript */ 
} else { 
    /* desktop view related javascript */ 
} 

點擊此處瞭解詳情： https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

Answer 4

而不是做它的文件準備的。將事件處理程序附加到窗口的resize事件。

Answer 5

你可以用函數包裝你的代碼，並從窗口把它調整事件是這樣的：

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

Answer 6

辦事的窗口縮放您可能要添加的事件處理程序resize事件。

就是這樣。

$(document).on('ready',function(){ 
    $(window).on('resize',function(){ 
     resize(); 
    }) 
}); 

function resize(){ 
    if ($(window).width() < 767) { 
     $('.mGnb a').click(function() { 
      $('#subLayer').slideToggle(200); 
      return false; 
     }); 
    } 
    else { 
     $('.mGnb a').hover(function() { 
      $('#subLayer').slideUp(200); 
      return false; 
     }); 
    } 
} 

Answer 7

$(document).ready(myfunc); 
$(window).resize(myfunc); 
function myfunc(){ 
if ($(window).width() < 767) 
{ 
    $('.mGnb a').click(function() 
    { 
     $('#subLayer').slideToggle(200); 
     return false; 
    }); 
} 
else 
{ 
    $("#header").mouseleave(function() 
    { 
     $(this).animate({height: "96px"}, 200); 
    }); 
} 
}