jQuery，响应式菜单不起作用

Question

我正在尝试为我的网站做一个响应式菜单。

if(window.matchMedia("(max-width: 767px)").matches){
- my code -
}

我使用上面的代码来检测窗口的大小，但是有一个问题就是当我调整它的大小时，我必须更新网站以使其再次工作，我该怎么办？这没有更新吗？

Answer 1

使用jQuery resize()函数：

 $(window).resize(function(){
       if(window.matchMedia("(max-width: 767px)").matches){
       // my code 
       }
 });

JSFiddle Demo
另一种做同样事情的方法是：

 $(window).resize(function(){
          if($(window).width()<=767){
               // my code 
          }
 });

JSFiddle Demo

Answer 2

尝试使用$(window).resize()：

$(window).resize(function() {
  if (window.matchMedia("(max-width: 767px)").matches) {
    // your code
  }
});

或者使用CSS：

@media screen and (max-width: 767px) { /* your css */ }