jQuery調整大小功能怪異行為

Question

我想刪除此類：“ col-sm-8”，並添加此內容：“ col-sm-12”，只要我的屏幕尺寸變為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時，它都會不斷發出警報，並且屏幕尺寸會自動更改。 而這兩條注釋行不起作用。

看到這個小提琴

Answer 1

是的， resize將在執行resize時持續觸發。

改用CSS媒體查詢

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