Question

我希望在窗口宽度小于768px时添加和删除css类。我使用javascript来做到这一点：

$(window).ready(function() {
 var $width = $(window).width();
  if ($width <= 768){
   $('header').addClass('hide');
   $('#menu-switch').removeClass('hide');
 };
});

问题是我要刷新页面才能运行。有没有办法添加和删除类而无需刷新页面？

Answer 1

JavaScript的：

window.onresize = function(event) {
var $width = $(window).width();
  if ($width <= 768){
   $('header').addClass('hide');
   $('#menu-switch').removeClass('hide');
 };
};

Answer 2

可以使用css实现更流畅的渲染，因为对于具有低性能计算机的用户来说，窗口调整大小监听器非常繁重。

尝试这样的想法：

@media screen and (max-width: 767px) {
 header, #menu-switch {
   display: none;
 }
}

Answer 3

jQuery(window).on('resize', function(){ ....

我们之前必须使用相同的想法来修复css。我们还添加了一些延迟并在文件准备就绪时触发了调整大小事件以确保。

setTimeout(function(){
  jQuery(window).trigger('resize');
}, 200);

Answer 4

尝试：

$(window).bind('load resize', function(){
 var $width = $(window).width();
  if ($width <= 768){
   $('header').addClass('hide');
   $('#menu-switch').removeClass('hide');
 };
});

Answer 5

您应该使用：

jQuery(window).resize(function(){
    var $width = $(window).width();
    if ($width <= 768){
        $('header').addClass('hide');
        $('#menu-switch').removeClass('hide');
    };
});

这样它可以捕获浏览器调整大小的事件，每次用户调整浏览器大小时，变量宽度都会得到一个新值。

Answer 6

jQuery方式将是

$(window).on('resize', function() {
   if ($(window).width() <= 768){
      $('header').addClass('hide');
      $('#menu-switch').removeClass('hide');
   }
   else {
      $('#menu-switch').addClass('hide');
      $('header').removeClass('hide');
   }
});

但你不应该使用它，因为通过所谓的媒体查询在CSS中有更高效的方法。您展示的用例的解决方案如下所示：

@media screen and (max-width: 768px) {
    header {
       display: none;
    }
    #menu-switch {
       display: block;
    }
}

@media screen and (min-width: 769px) {
    header {
       display: block;
    }
    #menu-switch {
       display: none;
    }
}

Answer 7

您需要检查页面何时加载以及何时调整大小或滚动：

var changeMe = function(){
   var $width = $(document).width();
     if ($width <= 768){
      $('header').addClass('hide');
      $('#menu-switch').removeClass('hide');
    };
};
/* On ready */
$(document).ready(function(){changeMe();});
/* On resize */
$(window).resize(function(){changeMe();});
/* On scroll */
$(document).scroll(function(){changeMe();});

这项工作100％。

但你可以使用CSS3解决这个问题：

@media screen and (max-width: 768px) {
    header {
       display: none;
    }
    #menu-switch {
       display: block;
    }
}

只需在您的主要风格之后加入CSS switcers，并仅更改您需要的内容。

用js更改css类

7 个答案: