jQuery - 由窗口调整大小触发的子元素移动元素

Question

我的网站上有一个过滤器，旁边有一个“左栏”类。我的网站是响应式的，我希望过滤器移动到带有'mobile-top-bar'类的div。

使用第一个'if'，我检查窗口是否已经低于992px，在这种情况下，过滤器将被移动到'mobile-top-bar'（这很好用）

if ($(window).width() < 992) {
    $('#moveableFilter').prependTo('.mobile-top-bar');
}

使用第二段代码我已经创建了一个应该来回移动过滤器的函数，但这不会发生。当我稍微改变窗口的宽度时（当它仍然高于992px时），过滤器已经从“左侧栏”消失了，当我将它改为992px以下时，它在移动顶部栏中不存在。

我做错了什么？

$(window).on('resize', function(){
  var win = $(this);
  if (win.width() < 992) {
      $('#moveableFilter').prependTo('.left-bar');
  } else if (win.width() >= 992) {
      $('#moveableFilter').prependTo('.mobile-top-bar');
  }
});

Answer 1

看起来你意外地转换了案件。试试这个：

};

...但是，我同意评论说最好不要使用两个不同的栏，而是使用CSS媒体查询来移动它。