JQuery调整函数奇怪的行为

Question

我想删除这个课程：＆＃34; col-sm-8＆＃34;并添加：＆＃34; col-sm-12＆＃34;每当我的屏幕尺寸变为500px或更低时。 （只是想让移动友好）。

我正在尝试以下功能：

$(window).resize(function() {
  if ($(window).width() <= 550) {
    /*$(".search-form-responsive").removeClass("col-sm-8");
    $(".search-form-responsive").addClass("col-sm-12");*/
    alert("sdjkgh");
  }
});

但我刚遇到了一件奇怪的事。每当我调整大小并使我的屏幕大小为500px时，它会一个接一个地保持警报，并且屏幕大小会自动更改。这两条评论的作品不起作用。

请参阅此fiddle

Answer 1

是的，resize将在执行调整大小时不断激活。

使用css media queries代替

@media (max-width: 550px) {
  .search-form-responsive {
    /*styles here */
  }
}